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イン プレ ス 


本 書 の 内 容 は 、 執 筆 時 点 (2015 年 11 月 現在 ) で の 情報 を も と に 書か れ て いま す 。 個々 の ソフ トウ ェ ア の アッ プ デ ー 
ト 状 況 や 読者 の 環境 に よっ て 、 本 書 の 記載 と 異な る 場合 が あり ます 。 本 書 に 記載 され て いる URL は 、 本 書 執筆 後に 
変更 され る 可能 性 が あり ます 。 本 書 の 内 容 お よび サン プル の 実施 ・ 運 用 に お いて 発生 し た いか な る 損害 も 株 式 会 社 
イン プレ ス と 著者 は 一 切 の 責任 を 負い ませ ん 。 


本 書 で 紹介 し て いる サン プル ゲー ム の 著作 権 は 、 著 者 が 所 有 し て いま す 。 個人 的 に 又は 家庭 内 その 他 こ れ に 準ずる 
随 ら れ た 男 囲 内 な ど 、 著 作 権 法 に 定め られ た 範囲 内 に お いて 使用 する 場合 を 除き 、 著 者 お よび 株 式 会 社 イ ンプ レス 
に 無断 で サン プル ゲー ム を 複製 、 転 載 、 改 変 、 編 集 、 頒 布 、 販 売 等 する こと は で きま せん 。 


本 書 で 紹介 し て いる サン プル ゲー ム に 使用 され て いる 画像 素材 の 一 部 は 、 ゲ ッ テ ィ イメ ー ジ ズ ジ ャ パン 株 式 会 社 が 著 
作 権 を 所 有 し て いま す 。 利用 に 際 し て 、 下 記 の 行為 は 禁止 され て いま す 。 


・ ラ イセ ンス 対象 物 の リバ ー ス エン ジニ アリ ング 、 ディ コン パイ リン グ 、 ディ アセ ン ブ リ ング 
・ 特別 に 定め られ た 場合 を 除き 、 ラ イセ ンス 対象 物 の 修正 、 複 製 、 配 布 、 展 示 、 上 演 、 サ ブラ イセ ンス 、 再 公表 、 
再送 信 、 二 次 的 著作 物 の 作成 、 移 転 、 販 売 、 又 は その 他 の 利用 





ひ 〇 本 書 に 登場 する 会 社名 、 製 品名 、 サ ービス 名 は 、 各 社 の 登録 商標 また は 商標 で す 。 
ひ 〇 本 文中 で は ⑧、TM、 〇 マー ク は 明記 し て お り ま せん 。 
ひ 〇 本書 の 内 容 に 基づく 実施 ・ 運 用 に お いて 発生 し た いか な る 損害 も 、 株 式 会 社 イ ンプ レス と 著者 は 一 切 の 責任 を 負い ませ ん 。 


〇 本 書 の 内 容 は 、2015 年 11 月 の 執筆 時 点 の も の で す 。 本 書 で 紹介 し た 製品 だ サー ビス な どの 名 前 や 内 容 は 変更 され る 可能 性 が あり ま 
す 。 あら か じ め ご 注意 くだ さい 。 
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プロ グラ ミン グ の 上 達 に 近道 は な いと 思っ て いま す 。 | いろ ん な コー ド を 読ん で 引き 出し を 増やし 、 自 分 で いろ いろ 書い 
て 試行 錯誤 し 、 技 術 や 知識 を 定着 きせ る | 、 こ の よう な プロ セス を 繰り 返す の が 一 番 だ と 感じ て いま す 。 


筆者 が 子ども の ころ は 、 街 の 書店 に 数 多く の パソ コン 雑誌 が 並ん で いま し た 。 当時 小学 生 だ っ た 自分 は "ゲー ム を 
や り た いと いう 一 心 で 、 雑 誌 に 掲載 きれ て いる ソー ス を ひたすら 入力 し た も の で し た 。 も ちろ ん 、 言 語 を 体系 立て て 
習っ た こと は な 〈、 わ け も わか ら ず 入力 し 、 デ バッ グ や 改造 を 繰り 返し て いた だ け で す が 、 そ こ か ら 得 た も の は 非常 に 大 
きか っ た よう に 思い ます 。 最 近 は 高 品位 な ゲー ム も 無料 で ダウ ン ロ ー ド で きる よう に な り 、 自 分 で ソー ス を 入力 する 必要 
性 は な く な っ て し まい まし た 。 


本 書 に 掲載 し た プロ グラ ム は ダウ ン ロ ー ド 可能 で す 。 し か し な が ら 、 時 間 に 余 裕 が ある 方 は ぜひ 自分 の 手 で 入力 し て 
みて くだ さい 。 お そら く 、 一 度 で 動く こと は な いで し ょ う 。 デ バッグ を 通し て 何かしら 学び が ある は ず で す 。 動く よう に な っ た 
らら 改造 し て み ま し ょ 2 う 。 表示 を 変え た り 、 機 能 を 追加 し た り 、 い ろ い ろ 試 し て みる こと で 一 層 理 解 が 深め られ る は ず で す 。 


本 書 は HTML5/CSS/]avaScript/ ゲ ー ム と いっ た 広い 男 囲 を カバ ー し て いる た め 、 難 し く 感 じ る 箇所 が ある か も し 
れ ま せん 。 壁 に が つか っ だ た と き は 、 ま ず 目 分 で 調べ て み ま し ょ う 。 プロ グラ ミン グ は 楽し い ア クティ ビ テ ィ で す 。 身 に 着け 
て お く と 将来 か な ら ず 役に立つ と き が きま す 。 本 書 が きっ か け と な り 「 ゲ ー ム を つく っ て みよ う 」 と 思っ て いた だ き 、Web や 
ブラ ウザ 、 プ ログ ラミ ング の 基礎 を 身 に つけ て いた だ けれ ば 、 こ の 上 な い 喜 び で す 。 
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動作 環境 

本 書 は Windows 10 の Internet Explorer 11、Edge (20.10240.16384.0) 、Google Chrome 
(46.0.2490.86m) と いっ た ブラ ウザ を 使用 し て コン テン ッ ツ 開 発 と 動作 検証 を 行い まし た 。 ま た 、iPad (iOS 9.1) 
上 の Safari、Android (Zenfone2) 上 の Chrome で も ひと と お り サ ンプ ル が 動作 する こと を 確認 し て いま す 
(2015 年 11 月 20 日 時 点 )。 サ ンプ ルコ ン テ ン ツ は HTML/CSS/]avaScript の 基本 的 な 内 容 で 実装 ほれ て い 
る た め 、 最 近 の ブラ ウザ で あれ ば ぱ ば プラットフォーム を 問わ ず 動 《 と 思い ます 。 し か し な が ら 、OS や ブラ ウザ 、 機 
種 に よっ て は 挙動 が 異な る こと も あり ます 。 特に タッ チ に 関し て は 未だ 動作 の ば ら つ き が 大 きい た め 、 意図 し た 
魏 動 に な ら な い 可 能 性 が ある こと ご 了 丁 承 くだ さい 。 

すべ て の サン ブル は Web サー バ と の 通信 を 必要 と し ませ ん 。 必要 な ファ イル が ロー カル に あれ ば イン ター 
ネッ ト に 接続 し て いな い 環 境 で も 実行 可能 で す 。 さ ら に 、 サ ー ド パー ティ の ライ ブラ リ も 一 切 使用 し て いま せん 。 
ブロ グラ ミン グ の 基本 、 楽 し き は と い っ た と ころ に フォ ー カ ス し た か っ た の で 、 そ の よう な スタ ンス で 開発 ・ 実 装 を 進 
め ま し た 。 


人 @ け サン ブル プロ グラ ム に つい て 
本 書 で 解 語 し た サン プル プロ グラ ム は 、 以 下 の URL か ら す べべ て ダウ ン ロ ー ド で きま す 。 


http://book.impress.co.jpD/books/1115101084 


st 0 conf 和 較 間 本 


本 書 で つく る 
サン ブル ゲー ム 


本 書 で 解説 され て いる ゲー ム は 、 解 説 書 に あり が ちな [説明 の た め の ゲ ー ム 」 で は 
な く 、 実 際 に 遊ん で 楽し いも の 、 自 作 する と き の 参考 に な る よう な 実用 的 な も の を 目 
指し まし た 。 各 ゲー ム の ソー スコ ー ド は 省略 な く 全文 を 掲載 され て いま す 。 つま り 、 
行 数 は それ ほど 長く な い の で す 。 物 事 は 楽し く な いと 続き ませ ん 。 本 書 も 楽し みな が 
ら 読 み 進ん で いき まし ょ う 。 
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遊び 方 

スタ ー ト ボタ ン を 押下 する と 軽快 な 音楽 と と も 
に ゲー ム が 始ま り ま す 。 近く に ある 同じ 野菜 を 
連結 し て 消し て くだ さい 。 消し た 分 の 野菜 は 上 
か ら 沙 ち て きま す 。 野菜 が ぶつかり ながら 落ち 
て いく 様子 は 見 て いる だ け で 楽し く な る こと で 
し よっ つ 。 制限 時 間 は 約 1 分 間 、 で きる だ け 多 く の 
野 茶 を 消し て 高 得点 を 狙っ て くだ さい 。 


開発 の ホイ ント 

野 来 が ぶつ か りな が ら 沙 ち て くる 様子 は 一 見 す 
る と 複雑 そう に 感じ る か も し れ ま せん が 、 ゲ ー 
ム 本 体 の ソー スコ ー ド は ら 30 行 程度 、 本 書 用 に 
開発 し た 独 目 の ら D 物 理 エ ンジ ン Tiny ら 2D.js 
の ソー スコ ー ド も ら 60 行 程度 に すぎ ませ ん 。 こ 
の 種 の ゲー ム の 中 で は か な り 短 い コ ー ド に 抑え 
る こと が で きた と 思っ て いま す 。 一 般 的 な リア 
ル タ ダイム ゲー ム と 同じ よう に 、 メ イン ルー プ で 
マウ ス や タッ チ の イベ ント を 負 理 し 、 定 期 的 に 
Canvas の 画面 を 更新 し て いま す 。 

本 ゲー ム の ボ ポイ ント は や は り 物 理 エ ンジ ン で 
す 。 一 般 的 な 物理 エン ジン ライ ブラ リ は 非常 に 
高 機能 で す が 、 そ れ だ け に 習得 に 時 間 が か か り 
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ます 。 一 方 、 本 書 で 実装 し た エン ジン は 極限 ま 
で 機能 を 削 つ た の で ら 60 行 程度 し か あり ませ 
ん 。 ほか が の エン ジン と 比べ る と 省 得 は も ちろ ん 、 
中 身 の 理解 や 修正 も 容易 な は ず で す 。 


この ゲー ム で 学ぶ こと 

物理 世界 の オブ ジェ クト を 画像 を 使っ て 描画 
する 

残り 時 間 を 扇形 の ゲー ジ で 描画 する 


学 当 の ボイン ト 

プロ グラ ミン グ 初 心 者 の 方 で あれ ば 、 野 菜 や 背 
景 の 画像 を か える 、 ス コア の 加算 方 法 を か え 
る 、BGM を 変え る 、 と いっ た こと を 試し て みて 
くだ さい 。 それ だ け で も ゲー ム の 印象 は 大 き 
く か わる は ず で す 。 物理 エン ジン Tiny ら D.js 
は わが か が りや すさ を 優先 し て いま す 。 パフ ォ ー マ 
ん チョ ー ニ ンダ 人 は る も いま は ん 。 久 寺 小 選 
目 信 の ある 方 は ボトル ネッ ク 部 分 を 特定 し 、 パ 
フォ ー マ ン ス の 改善 に 取り 組ん で みて くだ さ 
い 。 角速度 の サポ ー ト な ど 新 た な 機能 を 追加 し 
て も 面 曰 いか も し れ ま せん 。 改善 の 示 地 は た く 
さん ある は ず で す 。 


Funky Blocks 


HE 隊 】 
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遊び 方 この ゲー ム で 学ぶ こと 

いわ ゆる 落ち 物 系 ゲー ム で す 。 こち ら も 軽快 な @ 本 格 的 な ゲー ム を 作る 

BGM と 共に ゲー ム が スタ ー ト し ます 。 同じ 色 が  @ 効 果 音 の 再生 方 法 を 知る 

紙 万 向 、 も し く は 横 万 向 に さ つ 以 上 並 点 よう 、 夕 

イル を 上 下 : 左 右 に 入れ 替え て くだ さい 。 ブ ロッ 学習 の ポイ ント 

ク が 消え る と 上 の ブロ ッ ク が 落ち て きま す 。 短 メイ ン ル ー プ を 使っ た 一 般 的 な リア ル タ イ ム 
時 間 に 連 続 し て 消す と 連鎖 モー ド に 突入 し さら _ グ ゲーム で す 。 特 別 な 処理 は あり ませ ん が 、 コ ー ド 


に スコ ア が 加算 ご され ます 。 を 短く する た め に 関数 オブ ジェ クト を 活用 し て 
いま す 。 その あたり に 彰 目 し て コー ド を 読み 進 
開発 の ホイ ント め て いた だ けれ ば と 思い ます 。 


この ゲー ム の ソー スコ ー ド は 全部 で 330 行 程 背景 画像 を 描画 する 、 メ ッ セ ー ジ を 工夫 する 、 連 
度 で す 。 デ ザイ ナー の 力量 に よる と ころ が 大 き 鎖 に よる 加点 を 疑っ た も の に する 、 ま だ まだ 改 
い の で す が 、 人 門 書 の 題材 の 割 に は 高い クオ 良 の 未 地 は た くさ ん あり ます 。 自分 な り の 工夫 
リティ を 実現 で きた の で は な いか と 思っ て いま を 加え る こと で より 高い 完成 度 の ゲー ム に 仕上 
す 。 個 々 の タイ ル は Tile オ ブ ジ ェクト と し て 実装 げ て くだ さい 。 

し て いま す 。 タイ ル を スズ スムーズ に 落下 させ る 方 

法 、 タ イル を 消し た 時 に 表示 され る メッ セー ジ を 

フェ ー ド アワ ト す る 方 法 、 ゲ ー ム 開始 時 に 同色 が 

3 つ 並 ば な いよ うに する 方 法 な ど に 着目 し て く 

だ さ で し 
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遊び 方 

ご 存じ ビリ ヤー ド で す 。 た だ し 、 実 際 に ゲー ム の 
ルー ル は 実装 し て いま せん 。 玉 を 突い て 穴 に 落 
こし て くだ さい 。 何 回 で すべ て の 玉 を 落と せる 
か が 、 も し く は 実際 の ゲー ム と 同じ よう に ら 人 で 
喘 つ っ て こも よい で し ょ う 。 


開発 の ホイ ント 

この ゲー ム も Vegetable March と 同じ く 
TIny ど CD.js を 利用 し て いま す 。 この ゲー ム 本 
体 の ソー スコ ー ド は 1 50 行 程度 で す 。 ポケ ッ ト 
の 穴 は 円 オブ ジェ クト と し て 実装 され て お り 、 そ 
の 円 オブ ジェ クト と 衝突 し た と き に 玉 を 消去 し 
て いま す 。 物 理世 界 に ある オブ ジェ クト に 初速 
度 を 写 え る 方 法 、 衝 突 時 の 処理 方 法 な ど 、 物 理 
エン ジン の 基本 的 な 使い 方 を 学習 する に は 良 
い 題 材 だ と 思い ます 。 


Billiard 





この ゲー ム で 学ぶ とこ 

る マウ スズ ス や タッ チ の 座標 が 物理 世界 の オブ ジェ 
クト に 往 ま れる か 検出 する (手玉 の 検出 ) 

@ 物理 世 の オブ ジェ クト が 衝突 し た 時 に オブ 
ジェ クト を 消去 する (ポケ ッ ト へ 落下 時 ) 


その 他 

ビリ ヤー ド は あく まで も 一 例 に すぎ ませ ん 。 今 
回 は ビリ ヤー ド と いう 題材 に し まし た が 、 背 景 
バト ル 場 に し て 、 玉 の 代わ り に モン スタ ー の 画 
父 を 使っ つて みる と … 人 気 ゲ ー ム が 思い 浮か ぶ の 
で は な いで し ょ つが ? 画像 を 差し 替え る だ け で 
も 印象 は ガラ フリ こと 変 わる は ず で す 。 さら に 、 障 害 
物 を 配置 する 、 爆 発 物 を 配置 する 、 い ろ い ろ な 
ゲイ ディ イア を 盛り 込む こと が で きる は ず で す 。 
みな さん の 想像 力 を 働か せ て 面 日 い ゲ ー ム に 
秋 貌 ご ば せ て くだ さい 。 オリ ジ ナ ル ゲ ー ム を つく 
る 楽し み を 実感 し まし ょ つ 。 


Saturn Voyager 


いい 3 





E コ 石 を 避け て どこ まで 進め る か を 競う ゲー 
ム で す 。 疑 似 3D で は あり ます が 、 宇 宙 
空間 を 高速 に 進ん で いる よう な 視覚 効果 を 表 
現 で さて いる と 思い ます 。 この ゲー ム の ソー ス 
コー ド は 1 70 行 程度 で す 。 陣 石 を 自分 か ら の 距 
商 | に 応じ て ソー ト し 、 遠 い 順 か ら 順 番 に 描画 する 
こと で 目 然 な 効果 を 演出 する 、 ペ イン ター の ア 
ルコ ゴリ ズム を 実装 し こい ます 。 ま た 、canvas の 
座標 糸 変 換 を つか っ て 陣 石 を 回 転 さ せ て いま 
す 。 画像 の 回 転 は いろ いろ な ゲー ム で 利用 で き 
る の で 覚え て お きた い 手 法 の ひと つ で す 。 






この ゲー ム で 学ぶ こと 
る CanVvaS の 座標 軸 変 換 に な れる (画像 の 回 転 ) 
@ 守 似 GD モ デル に 親しむ 


人 公 を 上 下 左 右 キ ー で 操作 し て 迷路 右 
下 の ゴ ー ル を 目指 し て くだ さい 。 モン ス 
ター ど 叱 が 容赦 な く 襲 い 掛 か り ま す 。 迷路 は 毎 
回 動 的 に 作成 され ます 。 画面 右側 に は 地図 が 表 
赤 で れれ ます 。 この ゲー ム 本 体 の ソー スコ ー ド は 
40 行 程度 で す 。 迷 路 の 生成 に は 棒 倒 し 法 と い 
うっ アル ゴリ ズム を 使用 し て いま す 。 主人 公 の 視 
時 を 表 堺 すめ た め 、 円 形 の クリ ッ プ リー ジョ ン を 
設 征 し て 舞 画 を 行っ て いま す 。 移動 も スム ー ズ 
に スク ロー ル す る よう に 工夫 し て いま す 。 





この ゲー ム で 学ぶ ご と 

@ 上 トト 左右 スク ロー ル ゲ ー ム に 慣れ る 

@ 迷路 の 目 動 生 成 を 行う 

@ CanvaSs の リー ジョ ンク リッ プ の 手法 を 知る 
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Reversible Piece 


oo os ー ル 説明 は 不要 で し ょ うつ 。 石 を 置い て 相 

/ 手 を 挟ん で ひっ くり 返し 、 数 の 多い ほう つう 
のり 謗 ちと いう ダ ゲーム で す 。 ツー メメ コー ド は ら 80 
行程 度 で す 。 コン ピュ ー タ が あな た の 対戦 相手 
を し て くれ ます 。 この ゲー ム は 四隅 を 取っ つた は ほ 
つう が 圧倒 的 に 有利 に な る こと は ご 存 知 だ と 宮 い 
ます 。 それ ぞ れ の マス 目 に 優先 順位 の 重み づけ 
を 設定 し 、 合 計 値 が 高く な る よう に 石 を 置い て 
いく て とい コシ ルン プル な アル コリ スム で G す 。 コン 
ピュ ー タ の 思考 アル ゴリ ズム が ご どの よう に 実装 
され て いる か 、 そ の 一 例 と し て コー ド を 読ん で 
いた だ けれ ば と 思い ます 。 





黒 (あな た ) :29 枚 白 (PC) :13 枚 


この ゲー ム で 学ぶ こと 
@ る コン ピュ ー タ の 思考 回 路 を 実装 する 


ca 


oO レー ヤー を 操作 し て すべ て の 荷物 を ゴー 
ノ ル 地 点 に 運ん で くだ さい 。 た だ し 、 荷 物 
を 押す こと は で き て も 引っ 張る こと は で きま せ 
ん 。 荷物 を ら つ 同時 に 押す こと も で きま せん 。 実 
際 に や っ て みる と パズル 的 な 面白 ご を 実感 で き 
る と 思い ます 。 地図 デー タ を 含め て も コー ド は 
100 行 未満 で す 。 実際 に コー ド を みる と その 短 
さ に 驚か れる か も し れ ま せん 。 コー ド を 短く する 
た め ピ ビット 演算 と いつ 手法 を 使用 し まし た 。 解説 
記事 を 参考 に 寧 に 読み 進め て くだ さい 。 





こ ご こ の ゲー ム で 学 点 こと 

@ 仮想 マッ プ の 使い 方 に な れる 

@ JavaSCriDt か ら 画 像 を Canvas に 押 画 する 
@ ピッ ト 演 算 に な れる 
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衣 り 、 バ チン コ 玉 を 発射 し こく だ さい 、。 画 

面 下 部 で 左右 に 動い て いる ター ゲッ ト に 当たる 

と 得点 で す 。 ソー スコ ー ド は 1 50 行 程度 で す 。 

理 エン ジン で は 、 時 計 を 進め る だ け で オブ 

ジェ クト の 位置 が 自動 的 に 計算 され ます 。 画面 

下部 に ある ター ゲッ ト だ け は JavaScript か ら 

人 明示 的 に 場所 を 変更 し て いま す 。JavaSoript 


か が ら 物 理世 界 を 直接 制御 する 一 例 と し て ご 覧 く 
だ さい 。 


この ゲー ム で 学ぶ こと 
@ 物理 世界 の オブ ジェ クト に 初速 度 を 与え る 
( 玉 の 発射 ) 


昌和 

*] | に こめ あたる と 効果 音 と と も に 青 か ら 赤 に 

節 わり ます 。 すべ て の 殺 の 色 が 変わ る まで の 時 

癌 を 競っ て くだ さい 。 ソー ス は 約 130 行 で す 。 

ンー スズ コー ド は ほとん ご Pachinko と 同じ で す 。 

この グー ム を 理解 する た め に 必要 な 知識 は 本 

副 の ほか の ゲー ム の 解説 で カバ ー し て いる の 

癌 で 、 こ の ゲー ム で は ぜひ | 自分 で ソー スコ ー ド を 


説 ん で 理解 する 」 と いう 作業 を 楽し ん で みて く 
だ さい )。 


この ゲー ム で 学 避 こ と 

$@ 物理 世界 の オブ ジェ クト が 衝突 し た 時 に 特別 
な 処理 を 行 つ (効果 音 ) 

@ クリ ッ ク さ れ た 座標 位置 か ら 角 度 を 求め る 


FlipCards 


王 三 。 わ ず と 知れ た 神経 衰弱 で す 。 すべ て の 
亡 コ カー ド を ひっ くり 返す まで の 時 間 を 競い 
ます 。 ソー スコ ー ド は 約 180 行 で す 。class 冊 
性 を JavaScript か ら 操 作 し て 表示 を が かえ る 
方 法 、 配 列 を ラン ダム に シャ ッ フ ル す る 方 法 、 数 
値 が ちがっ た と き に 裏返す タイ マー の 使い 亡 な 
ど ご ど JavaSCriDt で の 基本 的 な 負 理 方 法 に つい 
て 学 点 た め の 題 材 で す 。 カー ド の 枚数 や 種類 を 
増やす な ど 、 さ ま ざ ま な 工夫 を 疑 ら し た 神経 嘉 
弱 ゲ ー ム 作成 に も 挑戦 し こみ まし ょ つ 。 


この ゲー ム で 学ぶ こと 

@Array オ ブ ジ ェクト の prototype を 使っ て 
みる 

@ タイ マー の 使い 方 に な れる 


経過 時 間 39 徐 


15 パ ズル 


プロ ヨタ イル の 上 下 左 石 を クリ ッ ク す る て 、 
= その 数 値 が 空白 タイ ル と 入れ 替わり ま 
す 。 その 作業 を 繰り 返し て 、 ラ ンダ ム に 並ん だ 
状態 か ら 1 一 15 の 順に 整列 させ る と いう パ 
ズル で す 。 ソー ス は 約 70 行 で す 。 今 回 の サ 
ンプ ル の 中 で は 最も 短い も の の ひと つ で す 。 
JavaSCript か ら 動 的 に 要素 を 作成 する 方 法 、 
スタ イル を 使っ て 見 た 目 を 良く する 方 法 な どの 
参考 に し て くだ さい 。 また 、 行 と 別 を 増やす な ど 
の 変更 も し て み ま し ょ よ つ 。 








この ゲー ム で 学ぶ こと 
@ る DOM 要素 を JavaScript か ら 作 成す る 
@for 文 の 二 重 ル ー プ に な れる 
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デザ イン の 重要 性 に 関し て 


5 股 的 に 、 開 発 者 が 単独 で 実装 し た ゲー ム 
_ は 魅力 に 欠け た も の に な り が ち で す 。 と 
いう の も 、 ゲ ー ム は 、 企 画 、 デ ザイ ン 、 サ ウン ド と 
いっ た いろ いろ な 要素 が 統合 され て 初め て 画 白 
いも の に な る こと が 多い た めで す 。 今回 の 執 侍 
に あたり 、 最 初 は 自分 で デザ イン を 行っ て いま し 
た 。Vegetable March や Funky Blocks 
の 原型 は 左 図 の よう な 感じ で し た 。 
前 回 の 著書 * で デザ イナ ー の 山本 麻美 さん と 協 
業 さ せ て いた だ く 機 会 が めった の で す が 、 そ の 
際 に デザ イン の 大 切 さ を 痛 感 し まし た 。 自分 の 
加 還 に 問 無味 乾燥 な アプ リ が 魔法 を か けら れ た か の よう 
絆 - 装 に 魅力 的 な も の に 変貌 し た の で す 。 今回 は 幸い 
時 汗 画 5OOC 還 回 2 間 識 に も 近所 に 住む デザ イナ ー の 井筒 晴 香 さ ん に 
ご 協力 いた だ く こ と が で きま し た 。 結果 は ご 覧 
本 いた だ いた 通り で す 。 ゲー ム が 見 違え る よう に 
- 較 較 な っ た こと に 、 同 意 い た だ ける か と 思い ます 。 





(11 


| 





※ |JavaScript で 作る Windows スト アア プリ 開発 スタ ー ト ガイ ド | (イン プレ ス 刊 ) 


@ け サン ブ ル ゲー ム の スマ ホン タブ レッ ト 対 応 に つい て 

タフ ブフ レット や スマ ー ト フォ ン の 場合 、 マ ウス や キー ボー ド で は な く タ ッ チ を 使用 し ます 。 

本 書 で も タッ チ を 意識 し て サン プル を 作成 し まし た が 、 ブ ラウ ザ に よっ て 挙動 に ば ら つ き が あり 、 す 
べ て の ブラ ウザ に 対応 する こと は 困難 で し た 。 

放 者 が で きる 限り コー ド を 改変 せ ず に 、 多 く の 0S/ ブ ラウ ザ に 対応 で きる よう に し まし た が 、 す べ て 
の 0S/ フ ラウ ザ に 対応 し て いる わけ で は な い 旨 ご 了承 くだ さい 、。 


人 @ 林 書 で 使用 し て いる 物理 エン ジン に つい て 

本 書 の サン プル ゲー ム で 使用 し て いる 物理 エン ジン に つい て は 、 イ ンプ レス 社 が 運営 する エン ジニ 
ア の た め の 技 術 解 説 サ イト |「Think IT] に 詳細 な 解説 記事 を 掲載 し こい ます 。 ぜひ こち ら も ご 参照 
くだ さい 。 

[書籍 連動 ]JdavaScript 物 理 エ ンジ ン 解 説 

https://thinkit.co.jpD/series/4770 
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HTMLS 
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HTML+CSS の 基本 


みな さん が 目 に する ホー ムペ ー ジ は HTML と いう 言語 で 記述 され て いま す 。 こ の 章 
で は HTML の 基本 的 な 書き 方 と CSS に つい て 勉強 し ます 。 本 章 を 読み 終わ る ころ 
に は 簡単 な ペー ン を 作成 で きる よう に な り ま す 。 ぜひ プロ グラ ム を 入力 し な が ら 読 
み 進 ん で いっ て くだ さい 。 


と Je1deuo 








020 





う _ | 文書 の 構造 
ある 各 度 まとまっ た 文 草 を 書く 場合 、 通 常 、 見 出し を つけ て 読み や すく する で し ょ 
うつ 。HTML は この よう な 見 出し と 本 文 と いっ た 文書 の 構造 を Web 上 で 表現 する た 
め の も の で す 。 一 方 CSS は 、 見 出し の 書体 を 太く する と か 、 色 を 変え る な どの 体 
区 を 設定 する た め の も の で す 。 HTML と CSS どちら も Web ペー ジ を つく る に は 
錠 X か せな い 技 術 で す 。 ま ず は HTML か ら 学 習 し て いき まし ょ よう つう 。 


( 2-1-1 | 文書 の 構造 ) 


文書 と 言っ て も る いろ いろ で す が 、 た だ と えば 論文 に は 、 タ イト ル が あっ て 、 その 下 に 著者 名 な どの 情報 が つづ き 、 
見 出し 、 段落 が 繰り 返さ れる の が 一 般 的 で す 。 ま た 、 手紙 な ど で は 前 文 、 主文 、 末 文 、 後付け と いう 構成 を と 
り ま す 。 も し 、 順 番 が 送 に な る と 強い 違和感 を 覚え る で し ょ う 。 
論文 の 例 手紙 の 例 


後付け 末 文 主文 前 文 


タイ トル ー 一 第 12 回 HTML の 構造 化 に 関す る シン ボ ポジ ウム 


著者 一 一 WWW 大 学 工学 部 田中 賢一 郎 Kenichiro Tanaka 


概要 
段 基 一 一 本 論文 で は 歴史 的 な 背景 を 踏ま え 、 現 在 の HTML が ご この よう な 状況 に 辿る に 
至っ た 経緯 に つい て 考察 する 


叶 州 と OfAOT 人 


若 店 十 | | 混 境 
き 9ri 四 性 と 9 で 上 叶 外 千 十 「 人 中 9「1 し 人 


s は 州 と 條 旗 人 へ 次 中 中 さ へ ざ へ . 蛋 ASP 本 


山 | Im 居 


は じ め に 

HyperText Markup Language ソ \ イ パー テキ スト マー クア ッ プ ラン ゲー ジ ) 、 
上 記 ・ 称 HTML (エエ イチ ティ ー エ ム エ リ ル ) と は 、 ウ ェ ブ 上 の 文書 を 記述 する た 
め の マ ー ク アッ プ 言 語 で ある 。 文章 の 中 に 記述 する こと で さま ざま な 機能 を 記述 
設定 する こと が で きる 。 


ウェ ブ の 大 幹 的 役割 を 持つ 技術 の 一 つ で HTML で マー クア ッ プ され た ドキ ュ メ ン 
ト は ほか の ドキ ュ メ ント へ の ハイ バー リン ク を 設定 で きる ハイ パー テキ スト で あ 
り 、 画 像 ・ リ スト ・ 表 な どの 高度 な 表現 力 を 持つ 。 


e 州 Sr で 紅 Q 咽 (YY. の 葉 遂 「 い 中 州 中州 - ゴ 需 了 着 一 一 


新聞 も 同じ で す 。1 面 に トッ プ ニ ュ ー ス が あり 、 それ ぞ れ に は 大 き な 見 出し が つけ られ て いま す 。 写真 や 図 が 
捕 人 され て いる こと も ある で し ょ う 。 多く の 新聞 で は 政治 面 、 経済 面 、 社 会 面 と 続き 、 最後 の ペー ジ に テレ ビ 机 
と いう 構成 に な っ て いま す 。 そ の ほか 、 取 扱 説明 書 、 雑誌 、 小 説 、 あ ら ゆ る 文章 が 構造 化 き 3 れ て いる と いっ て も 
過言 で は な いで し ょ う 。 

この よう に 、 知 ら ず 知ら ず の 間 に 、 我 々 は 構造 化 さ れ た 文書 に 親しん で いる の で す 。 こ の よう な 文書 の 構造 
を 表現 し よう と いう の が HTML な の で す 。 


( 21-2 | 実際 の ペー ジ を 見 て みる ) 


EE も も も も も も も も も もたもた も も も も も に も も も に も に も た も に も も も も も も に も に に に も も も も に も も も も も に も も に も も ミネ ミネ ミミ ミネ ネネ ミミ ミネ ネネ ネネ ミミ ネネ ミミ ミミ ネネ ミネ ミ ネネ ミミ ミミ ネネ ミ ミミ ミネ ミネ ミミ ミミ ミミ ミミ ミミ ミミ まま まま まま まま まま まま まま まま まま まま まま まま る まる まる まもる るる る も 


で は HIML し と は どの よう な も の で し ょ うか ? どん な も の か 見 て み ま し ょ う 。 ブ ラウ ザ で ペー ジ を 表示 し て 、 画 面 
上 を 石 ク リッ ク し て | ソー ス の 表示 」 (Internet Explorer の 場合 ) と いう 項目 を 選び ます (Google Chrome で 
は | ペー ジ の ソー ス を 表示 」 を 選び ます ) 。 ソ ー ス と は ペー ジ 中 身 の こ と で す 。 


Internet Explorer で 「 ソ ー ス を 表示 」 を 選択 


生 http://www.impresS.CO.jP, の ・C| 笠 株 式 会 社 イ ンプ レス 


イン プレ フス 事業 ・ サ ービス 会 社寺 要 ニュ ー ス リリ ー ス 広告 掲載 法人 一 括 購 入 


busineSSS&serviCe COmpany Profile heWS「Geleas で e InSeftiOn DaCKaQe DU「C て haSe 


て で = や て 1 
5 選 ュ 
る 
を 3 く 
る 


sn ら MD で SS を 


に 謗 む (0 
コピ ー し た テキ スト を 使っ て 検索 (D) cr+shit+L | 骨 造 し よう 。 


impProSS 





名 前 を 付け て 昔 景 を 保存 (S).…… 

商 景 の コビー(C) Pr Pi 
バン 、 株 式 会 社 Impress Watch、 
アリ アア mn に hm し と ニテ ブ チー あ ア アイ ルリ と ュ あー ュ | 19 
} と な り ま し た 。 

9 電子 メー ル (Windows Live Hotmail) 4 ラル ) の に ゴク の と くし て 4 1 の ま 邊 

すべ て の アク セラ レー タ 

ショ ー ト カッ ト の 作成 (T) 

お 気に入り に 追加 (F)... 


ト 、 2 テン タル な るー ュ ー ス サー ビス 


は (新卒 ・ 第 二 新 卒 採用 ) の 葬 集 を 開始 し まし た 。 





株 式 会 せ イ ンプ レス 。  x 語 証 
| 和 を っ うっ う @ID wWwWr.impresS.-CO.jD 
「 
| 章 ンプ レコ | 。 ま 業 ・ サ ービス 会 社 概要 ニュ ー ス リリ ー ス 広告 掲載 法人 一 括 購 入 リク 


DUSIneSS&ServiCe CO'mD3hy Profile neWS「『elease ISGItIOT Da3CKadG DU「ChaSe 『t 
「 Impross 


あい 1 


| 
ed 
| 


1 
1 
1 


戻る (B) 


溢 
再読 み 込み (R) C+R り ” 


名 前 を 付け て 保存 (A).… crrs 日 円 い を 創造 し よう 。 
印刷 (P).… Cri+P 

日 本 語 に 翻訳 (T) 

ペー ジ の ソー ス を 表示 (V) eiE39 
バージ 情報 を 表示 (1) 


ンプ レス ジャ バン 、 株 式 会 社 Impress Watch、 
大 素 を 検証 (N) Cr+Shi+1 2 や とる) の ビア アテ mn に hm エニ テア アア イリ アド) ォ / ロー) 1 
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ブラ ウザ に よっ て 表示 状態 は 異な り ま す が 、 以 下 の よ うな HTML の 内 容 が 表示 きれ ます 。 


表示 され て いた ペー ジ の HTML が 表示 され る 


さき さ http://wwwr.impreSSs.cOo.]p/ - 元 の ソー ス 


アイ ル (F) 編集 (E) 書式 (O) 
1 k!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Trsnsitional//EN" “http://www-w3.ors/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
2 <html xmlns="http://www.w3.org/1999/xhtml"> 
9 <hea 必 
4 <mets http-equiv="Content-Type” content="text/html: charset=UTF-8" 
5 <title> 株 式 会 社 イ ン ブ レ ス </title> 
| く |ink href="css/style.css” re に "stylesheet" type="text/css” 
| <script type="text/javascript” src=“"js/jquery.js” charset="utf-8"></script> 
| く script type=“"text/javascript" src=^js/jquery.page-scroller.js" charset="utf-8"></script> 
| <script type=“text/javascript” src="newsrelease/modi.js"></script> 
| <body i 中 “topidx"> 
| <diy i 中 "box0"> 
| <diy ij 中 "menubox"> 
| <ul> 
く | ij><h1><a class="menu0*" href=*. だ > 株式 会 社 イ ン ブ レ ス </a></h1></ 1 は 2 
<|i> く as class="menu1" href=*"business/"> 事 業 ・ サ ービス business & seryice</a></11> 
く | 2<& class="menu2” href="prof ile/> 会 社 概要 company profile</a></|i> 
<| 2<a clsss="menu3" href="newsreleasse ゲ > ニュ ー ス リリ ー ス news release</a></| > 
く <|i><a class="menu4” href="http://ad. impress.co.jp/" target="_blank"> 広 告 掲載 insertion</a></1 2 
く <| 2<a class="menu5" href="http://ww. ips.co.jp/saiyou.shtml” target=*"_blank"> 注 人 一 括 購 入 packsge purchase</a></1i> 
く <| 2<a class="menu6” href="recrut/"> リ クル ー ト 情報 recruitment</a></1 > 
| ul> 
| div> 
| <a 中 "top"></a> 
<diy i 中 "Wainbox"> 
<h2>me inyisus </ ト 2> 
| <diy i 中 "topinfo"> 


| 


y <span style=“color: 般 e91ce:"> お 知ら せ (2015.05.21) </span> <a href="http://job、mynayi.jp/16/pc/search/corp79615/out line.htmI" 
| terget="_blenk">2016 春 入社 (新卒 ・ 第 二 親 卒 採用 ) の 募集 を 開始 し まし た 。</sx<br 
diy> 


<diy ji 中 "topbox“> 
<diy i 中 "topbox1"><h4> く <a href="bus iness/index.htmlMbusiness1"> 本 、 雑 誌 と 関連 Web サー ビス </s></h4> 
<p class="txt"> く <a href=“bus iness/index.htmlMbus iness1"> く jmg src="img/txt_topbox1.png” slt=" 暮 らし きよ り 豊 か に 楽し くす る 、IT、PC、 デ ジ 
タル 製品 を テー マ に 、 関 連 する 技術 情報 か ら 利用 方 法 まで 幅広 く 提供 する 出版 &Web サ ービス 事業 を 展 間 し て いま す 。“ width="440” height="60" 
| border="0" の as></px<p cless="partner"> く img src="img/img_topbox1.png” salt に "アメ ディ ア & サ ービス "width=“440" height="135" border="0" 
| uSemap=" 租 Map” の 





一 見 する と 難し を うに 見 えま す が 、 基本 と な る ルー ル は 実は ほ て も シン プル で す 。 こ れ か ら そ の ルー ル に つい て 
是 て いき まし ょ う 。 


年 妥 いろ いろ な ペー ジ の ソー ス を 見 て みよ う 








り - の | 最初 の HTML 
本 節 か ら 実 際 の HTML に 触れ て いき ます 。 単に 読む の と 手 を 動か し な が ら 読 む の 


で は 理解 の 度合 い が 格段 に 違っ て きま す 。 ぜ ひ 、 自分 で 入力 し て 結果 を 確認 し な が 
ら 読み 進ん で くだ さい 。 


( 2-2-1 | HTML の 「< >] 記号 に 注目 ) 

多く の 文書 は な ん ら か の 構造 を 持っ て いま す 。 ホー ムペ ー ジ も 例外 で は あり ませ ん 。 で は 、「 見 出し は ここ か 
ら こ こま で 」|「 段 落 は ここ か ら こ こま で 」 と いう こと を 、 どの よう に 記述 する の で し ょ うか ? HTML の ソー ス を 見 た と き 
に 「<| や 「>| と いっ た 記号 が た くさ ん あっ た こと に 気づい た と 思い ます 。 実は 、 こ の 「<| と 「>| が 文書 を 
構造 化す る た め の 印 、 す な わ ち | 見 出し の 範囲 ] や | 段落 の 範囲 ] を 示す 印 だ っ た の で す 。 |「<] と 「>」 
に 囲ま れ た 部 分 が 開始 で 、「<」 と 「/>」 に 囲ま れ た の が 終了 の 印 で す 。 具体 的 に は 以下 の よう に な り ま す 。 


< 見 出し > 見 出し の 内 容 </ 見 出し > 
< 段落 > 段落 1 の 内 容 </ 段 落 > 
く 段 落 > 段 落 ら 2 の 内 容 </ 段 落 > 


た だ 、HTML は 、 英語 圏 で 仕様 が 葉 定 され た こと も あり 、 構 人造 の 内 容 は すべ て 英 単語 で 記述 し ます 。 た と 
えば 、 文 書 の タイ トル は ぐ title>、 文 書 の 内 容 は <body>、 見 出し は <h1>、<h2>、<h3>、 了 段落 は <p> の よ 
うに 、 そ れ ぞ れ の 用 途 が 定め られ て いま す 。 

実際 の HTML 文書 を 見 て み ま し ょ 2 う 。 


HTML 文書 の 例 html-basic1.html 


く !DOCTYPE html> 
く html> 
く head> 
く <meta charset="UTF-8"> 
<title> み ん な の 料理 </tit1e> 
く /head> 
く body> 
<h1> 今 日 の レシ ピ </h1> 
く D> 
定番 料理 や 旬 の 食材 を 使っ た 料理 を ご 紹介 し て いま す 。 
今日 の 料理 は <i> タ ケ ノ コ ご 飯 </i> で す 。 
く / D> 
く /body> 
く /html> 
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前 ペー ジン HTML を ブラ ウザ で 表示 


(や 還 ] D:\BookwJavaScript\HTML D ・ で | 人 みん な の 料理 


今日 の レシ ピ 


クー は そこ し て いま す 。 今 


定番 # 
日 の 料理 は タク ンコ ご 次 で す 





| く <] と |>] に 閉 ま れ た 部 分 を 「 タ グ 」 も し く は 「 要 素 ] と 呼び ます 。 ち な み に 英 語 で は tag あるいは element 

と 呼び ます が 、 辞書 で tag を 調べ る と 「 区 別 す る 、 タ グ を 付け る 、 認 識 す る | な ど と 説明 され て いま す 。 つ まり 、 
く 開 始 タ グ > と く / 終了 タグ > で 囲む こと で 、 そ の 部 分 が どの よう な 意味 を 持つ の か 、 す な わ ち どん な 構造 な の 
か を 表現 し て いる の で す 。 

た と えば 、 あ る 部 分 を 斜体 (italic) で 表現 し た い 場 合 は 、[ 今 日 の 料理 は <i> タケ ノコ ご 飯 < バン で す | の 
よう に 記述 し ます 。 こ うす る と 「 タ ケ ノ コ ご 飯 ] の 部 分 だ けが 斜体 で 表示 きれ ます 。 

ちな み に 、HTML は HYper Text Markup Language と いう 5 意味 で す が 、 この Markup と は 「 印 を つけ る 」 
と いう 意味 で す 。 タ グ で 囲ん で 文章 の 構造 を 表現 する の で Markup Language と 呼ば れ て いる の で す 。 


前 ペー ジ の HTML を 入力 し て 表示 し て みよ う 


⑩ | メモ 帳 ] な どの エディ タ を 開く (入力 ツール に つい て は P.038 「1-5 統合 開発 環境 の すす め | 
参照 )。 
Windows キー を 押し て |「note」 と 入力 する と メモ 帳 が 検索 され る の で 、 そ れ を クリ ッ ク す る と メモ 帳 
が 起動 し ます 。 
Mac で は |「 テ キス ト エ ディ ッ ト 」 な ど を 利用 で きま す 。 

② HTML コー ド を 人 入力 。 
誤字 が な いよ う 2 正確 に 入力 し まし ょ う 。 

@「Sample1.html」 と し て 保存 。 
ファ イル の 種類 は 書式 情報 の な い プ レー ン な テキ スト 形式 に し ます 。 保存 時 の ダイ アロ グ で 「 テ キ 
スト 文書 ] (アプ リ に よっ て 「 テ キス トド キュ メン ト 」 「 テ キス ト 形 式 」 「 標 準 テ キス ト ] 「 プ レイ ン テ キ ス 
ト 」 な ど ) を 選択 し て くだ さい 。Mac の テキ スト エディ ッ ト の 場合 は 、「 フ ォ ー マ ッ ト 」 メニ ュー か ら 「 標 
準 テ キス ト に する | を 選択 し ます 。 

⑳ その ファ イル を ダブ ルク リッ ク し て 表示 する 。 
ダブ ルク リッ ク し て も ブラ ウザ が 立ち 上 が ら な い 場 合 は 、 フ ァイル の 拡張 子 が 正しく 設定 され て いる 
か 確認 し て くだ さい 。 


ああ * 生 デー に 3 は EAR 





く <html> の 直後 の <head> 有 要素 の 中 に 、 <meta charset=' UTF-8 > と ある の は 、「 こ の 文書 の 文字 は UTF-8 
と いう 形式 で 保存 され て いま す よ | と いう こと を 宣言 する た め の も の で す 。 

音 は 今 ほど 標準 化 が 進ん で いな か っ た た だ た め 、 S-JIS、 EUC な どの エン コー ディ ング 方 式 が 混在 し て 使わ れ て 
きま し だ た 。 エン コー ディ ング と は 文字 を どの よう に 数 値 に 変換 する か と いう ルー ル の こと で す 。 だ と えば 「 あ | と い 
う 文字 を 保存 する 場合 、 EUC で は A4A2 と し て 、 S-JIS で は 82A0 と し て 保存 きれ ます 。 同じ 文字 を 保存 する の 
に まっ た く 異 な る 情報 が 保存 きれ る の で す 。 

仮に EUC で 保存 し た ファ イル を S-]IS と し て 読も 2 と する と グチ ャ グチ ャ な 文字 に な っ て し まい ます 。「 ホーム 
ペー ジ で 文学 が 化け て 読め な い !] と いう 経験 を し た 読者 の 方 ちあ い る か も し れ ま せん 。 これ は ペー ジ 作 成 者 が ファ 
イル を 保存 し た と き に 使用 し た 文字 エン コー ディ ング を ブラ ウザ ー 側 で 正しく 認識 で き な か っ た こと が 原因 で す 。 

最近 で は UTF-8 が 主流 と な っ て きま し た 。 み な さん が 自分 で HTML を 記述 する 際 も 、 UTF-8 形 式 で 保存 し 、 


く <meta> タ グ を 挿入 する 習慣 を つけ る と よい で し ょ う 。 本書 の サン プル に は <meta charset='UTF-8 > が な い 


も の が ある か も し れ ま せん が 、 コ ン テ ン ツ を 作成 する と き に は 挿入 する よう に し た ほう が よい で し ょ う 。 





ファ イル の 拡張 子 


ファ イル の 拡張 子 と は ファ イル 名 の 後ろ に 付与 され る 短い 文字 列 の こと で す 。 た と えば 、 「Sample 1 .html」 
と いつ うつ ファ イル 名 の 場合 、|.html」 が 拡張 子 に 相当 し ます 。 パ ソコ ン は この 拡張 子 と アプ リケーション を 関連 
づけ て 管理 し て いま す 。 た と えば 、 「.html と いう 拡張 子 を 持つ ファ イル は Chrome で 開く ]」 と いう 感じ で す 。 
ダブ ルク リッ ク し て も ブラ ウザ が 立ち 上 が ら な い 場 合 は 、 フ ァ イ ル の 拡張 子 こ ア プリ ケー ショ ン が 正しく 関連 付 
けら れ て いる か 確認 し て くだ さい 。 
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う - う 3 HTML の 書き 方 の 規則 


HTML の 書き 方 に は 規則 が あり ます が 、 難し いも の で は あり ませ ん 。 こ れ ま で 見 て 
さ た よう に 、 基 本 は 文字 列 (文字 の 並び ) を 「 く 要素 名 > 文字 列 く / 要素 名 >」 で 
囲み ます 。 有 要素 名 を 使っ て 、 見 出し や 段落 な ど 文 書 の 構造 を 表し ます 。 


( 2-3-1 タグ の 書き 方 ) 


EE も も も に も に に に に に た に に に も に も に に に に に に も に に に に に に に に に も も も も まえ も も も も も も まま まま ええ も えま ネネ ネネ ネネ ネネ ネネ ネネ ネネ ネネ ネネ ネネ ミネ ミミ スネ ミネ ネネ ミネ ミネ ミス ミス まま まる まる まま る まま まる まま る まる る まる まる る る る る る まもる おる る な るー 


ょ ず 、 タ グ の 書き 方 の 基本 ルー ル を お さえ て お きま し ょ う 。 


ルー ル 1 : タグ に は 開始 タグ と 終了 タグ が あり 、 そ の 中 に 中 身 を 記述 する 
開始 タグ は | く ] 記号 と |>] 記号 で 囲み 、 終 了 タ グ は 「</」 記号 と 「>」| 記号 で 囲み ます 。 


タグ の 書き 方 


く 要 素 名 >L IL 中身 」 く / 要素 名 > 





開始 タク 終了 タグ 


ルー ル 2 : 中 身 が な い 要 素 は | 空 要素 ] と 呼び 、 以 下 の よ うに 記述 する 
代表 的 な も の に 改行 する <br /> や 、 画 像 を 表示 する <img /> が あり ます 。 


空 要 素 の 書き 方 
く 有 要素 名 /> 
HTML の 書き 方 の 例 html-basic2.html 


く !DOCTYPE html> 
開始 タク く htm1> 


く <head> 
< く <META charset="UTF-8"> 
く /head> 


開始 タク 終了 タク 
く body> 
<h2> 浅 草 鈴 光 名 所 </h2> 
く D> 空 要素 (改行) 


<br /> を 空 要素 (改行 ) 
・ 雷 門 - 浅草 寺 の 山門 、 正 式 の 名 称 は 、 風 神 雷神 門 <br /> 
・ 浅草 寺 - 京都 内 最 古 の 寺 で ある 。 山 号 は 金龍 山 <br /> 
<br /> ー 空 要素 (改行 ) ] 
近年 世界 各国 か ら の 観光 客 が 増加 し て いま す 。 空 要素 (改行 ) 
く / D> 
く /body> 
終了 タク く </html> 
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NIOIITIIE| < く html> の 上 に ある く !DOCTYPE html> は 「 こ の HTML 文書 は HTML5 を 意識 し て つく ら 
れ た も の で す 」 と 宣言 する た め の も の で す 。 ブ ラウ ザ は この 情報 を 見 て 「 こ の 文書 は HTML5 
を 想定 し に て つく られ た ん だ な 」 と 認識 する こと が で きま す 。 こ の 行 は HTML の 先頭 に 記述 され 
ます が 、 画 面 に 表示 され る こと は あり ませ ん 。 | お まじ な い 」 の よう な も の だ と 思っ て お いて く 
だ さい 


前 ペー ジ の HTML を フラ ウザ で 表示 


ポ 草 観 光 名 所 


- 浅草 寺 の 山門 、 正式 の 名 称 は 、 風神 震 補 
還 さ マ 和 孝 内 最 古 の 寺 で ある 。 山 呈 (は 全 吉山 


近年 世界 各国 が か ら の 観光 客 が 増加 し て いま す 。 





ルー ル 3 : タグ は 別 の タグ を 含む こと が で きま す が 、 そ の 場合 は 全体 を 含ん で 入れ 子 に し ます 。 
正しい 囲み 方 


く 有 要素 名 1> く 要素 名 2>LILIL」 く / 要素 名 2> く / 要素 名 1> 





間違っ た 囲み 方 


く 要 素 名 1> そ 要素 名 2>[ [| く / 要素 / 要素 名 2> 
ンー ここ 





だ た と えば 、 以下 の | 正しい 例 」 で は 、 内 側 の タグ < ジ > の 男 囲 が 外側 の タグ <p> に 含ま れ て いる の で 問題 あ 
り ま せん 。 し か し 、| 間違っ て いる 例 」 は を そう な っ て いな い の で 不正 な HTML となり ます 。 


正しい 例 間違っ て いる 例 
<p> 今 日 の 天気 は <i> 快 晴 </i> で す </p> <p> 今 日 の 天気 は <> 快 晴 </p> で す </ テ 


ちょ っ と わか り に くい か も し れ な い の で 例 を 使っ て 説明 し まし ょ う 。 た と えば 、 神 奈川 県 に は 横浜 、 川 崎 と いっ た 


市 が あり ます が 、 こ れ ら の 市 が 東京 都 に は み 出 すこ と は あり ませ ん 。 さら に 、 横 浜 市 は 中 区 、 旭 区 、 港 北 区 、 
神奈 川 区 と いっ た 区 を 含ん で いま す が 、 これ ら 6 の 区 の 一 部 が 川崎 市 に 含ま れる こと は あり ませ ん 。HTML で は 、 
含む 方 を |「 親 ]、 含ま れる 方 を 「 子 」 と 表現 し ます が 、 子 は 必ず 親 に 完全 に 含ま れる 必要 が ある の で す 。 
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02/ 


県 は 市 を 含む 、 市 は 区 を 含む 







神奈 川 県 
横浜 市 川崎 市 
男 較 | 


上 図 を HTML 文書 に 置き 換え て み ま し ょ う 。 





タク の 入れ 子 も 同じ 


ぐ head> 
「 ぐ diV> 「 


すべ て の 有 要素 は 親 要 素 に 完全 に 含ま れ て いる 様子 が わか る と 思い ます 。 仮に は み 出 し て し まっ た 場合 、 ど の 
ょ うに 処理 きれ る か は ブラ ウザ に よっ て 異な り ま す 。 





ぐ く htmI> 





ルー ル 4 : 一 番外 側 の 要素 は <html> が ひと つ だ け 


ルー ル 5 : 要素 に 付属 情報 が 必要 な 場合 は 属性 と し て 記述 し ます 。 属性 は 複数 指定 する こと も で きま す 。 


く 有 要素 名 属性 名 1 三 " 属 性 値 1' 属性 名 2= ニ "属性 値 2"> 


例 ) id 属性 が title と いう 値 で 、class 属性 が blue と いう 値 を 持つ p 要素 


Sp 1d="title" class="blue"> .... < く /D> 


ちな み に id 属性 は 、 HTML の 文書 中 で 要素 を 特定 する た め に 使用 し ます 。 パ スポ ー ト や 運転 免許 所 で 個 
人 を 特定 する よう な イメ ー ジ で す 。 一 方 、 class 属性 は 、 い くつ か の 要素 を まとめ て 処理 する と き に 使用 し ます 。 
赤色 の 服 を 着 て いる 人 々 、 年齢 20 歳 代 の 人 々 、 と いう よう に 対象 と な る 人 々 を 選択 する よう な イメ ー ジ で す 。 id 
属性 も class 属性 も 、 今後 た (さん 例 が 出 て きま す の で 、 ここ で は 「 ふ ぅ 一 ん 、 そ ん な も の が ある の か …」 程度 の 
認識 で か まい ませ ん 。 
主 な ルー ル は これ くら いで す 。 一 見 する と 非常 に 複雑 に 見 える HTML で す が 、 ル ー ル は 非常 に シン プル 
028 だ と いう こと が お わか り い た だ けた と 思い ます 。 


う _4.| HTML の 主 な 要素 
HTML 辞 典 な どの 書籍 や 、 要 素 を 解説 し て いる Web サイ ト な ど に は 、 膨 大 な 数 の 


要素 が あり 、 圧 倒さ ご れる か も し れ ま せん が 、 そ れ ら を 全部 覚え る 必要 は あり ませ 
ん 。 代表 的 な 要素 を いく つか が 覚え れ ば 十分 で す 。 必要 に 応じ て 徐々 に 引き 出し を 増 


や し て いき まし よう 。 


(241 これ だ け は 覚え て お きた い 必 須 要 素 ) 


EE まま まま まま まあ まま あま まあ まま あま まま も も も も も も まま まま まま まま も まま まま まま まま まま まま まま まま まま まま まま まま まま まま も ま も ま も ま も ま まま まま まま まま まま まま まま まま まま まま まま まま まま まま まま まま まま まま まる まま お お る 


よく 使用 され る 要素 と その 使用 例 を ご 紹介 し ます 。 


覚え て お きた い 要 素 
に ギン 元 に な っ た 英語 用 迷 








h1 
h2 
h3 
div 


の ' ん | 
ポ 





文書 問 の リン ク を 記述 


HI 


「 


Oo1 
] 1 
1mg 
br 
tr 
td 


HI 





NIOIITIIE| 昔 は いろ いろ な 要素 を 駆使 し て 、 ペ ー ジ の 見 映え を 競う 傾向 が あり まし た が 、 最 近 は CSS 
(P.040 12-6 CSS の 概要 」 ) を 使っ て 調整 する 方 法 が 主流 に な っ て きま し た 。 
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030 


pk 見 出し と 段落 に 使う 要素 一 h1、h2、h3、p、span 





く <hl>、<h2>、<h3> は それ ぞ れ 見 出し で す 。<p> は 段落 を 示し ます 。<span> は 文章 の 一 部 に 特別 な 意 
味 を 号 え る 人 役目 を し ます が 、 ブ ラウ ザ で の 表示 は 周囲 の 文字 と 同じ で す 。 <span> 要素 は 、CSS を 使っ て その 
部 分 だ け 表 示 を 変え た り 、 JavaScript か ら 値 を 書き 換え た りす る と き に 便利 に 利用 で きま す 。 ま た 、 複 数 の 要 
素 を ひと つ に まとめ る <qdiv> 要素 も 実際 の コン テン ツ で 多用 され ます 。 


使用 例 html-major-element1.html 


く !DOCTYPE html> 
く html> 
く head> 
く META charset="UTF-8"> 
く /head> 
く Dbody> 
<h1> こ れ は 見 出し 1 で す </h1> 
<h2> こ れ は 見 出し 2 です </h2> 
<h3> こ れ は 見 出し で す </h3> 
く D> 
これ は 段落 で す 。 上 と 下 に 空白 が 挿入 され 、 ま と まっ た 塊 と し て 提示 され ます 。 
く / D> 
く D> 
これ も 段落 で す 。 
span 要 素 を 使う と <span> 文 章 の 一 部 </span> に 特別 な 意味 を 持た せる こと が で きま す 。 
く / D> 
く /body> 
く /html> 


フラ ウザ 表示 結果 
暫 D:\Book\JavaScript\HTML D - 〇 | 給 D:*Book\JavaScrip.… 


これ は 見 出し 1 で す 


これ は 見 出し 2 で す 

これ は 見 出し 3 で す 

これ は 段落 で す 。 上 と 下 に 空白 が 挿入 され 、 まとまっ た 塊 と し て 提 
示さ れ ま す 。 


これ も 段落 で す 。span 要 素 を 使う と 文章 の 一 部 に 特別 な 意味 を 持 
た せる こと が で きま す .。 





く <ul> は 箇条 書き (番号 な し リス ト ) 、<ol> は 番号 付 の リス ト で す 。<]i> は リス ト の 項目 で す 。 箇条 書き は さま 
さま な 文書 で 利用 きれ ます が 、 こ れ $ 立 派 な 構造 の ひと つ で す 。 


使用 例 html-major-element2.html 


く !DOCTYPE html> 
く html> 
く <head> 
く META charset="UTF-8"> 
く /head> 
く body> 
<h2> ジ ャ ー マ ン ボテ ト </h2> 
<h3> 材 料 </h3> 
く ul > 
<1i> ジ ャ ガイ モ 2 個 </1i> 
<1i> 玉 ね ぎ 1 個 </1i> 
<1i> ベ ペー コン 299g</11i> 
く /u1> 
<h3> 作 り 方 </h3> 
< く ol> 
<1i> ジ ャ カイ モ と 玉ねぎ を 薄切り に し ます </1i> 
<1i> バ ベー コン 、 ジ ャ ガイ モ 、 玉 ね ぎの 順 で 炒め ます </1i> 
<1i> 塩 コン ショ ウ で 味 を 調え ます </1i> 
く /ol> 
く /body> 
く /html> 


回 回 還 四国 
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フラ ウザ 表示 結果 


馬 ] D:\Book\JavaScript\HTML の ・ で | 春 D:\Book 


ジャ ー マ ン ポテ ト 
材料 

・ ジ ャ ガイ モ 2 個 

・ 玉 ね ぎ 1 個 


ベー ニン 200g 
作り 方 
1. ジャ ガイ モ と 玉ねぎ を 消 切 り に し ます 


2. ベー コン 、 ジャ ガイ モ 、 玉ねぎ の 順 で 炒め ます 
3. 塩 コン ョ ウ で 味 を 調え ます 





| 時間割 」 | 野球 の スコ ア 」 「 テ レビ 番組 欄 」 [カレ ンダ ー」 [オセ ロ や 将棋 盤 」 あら ゆる と ころ に 表 形 式 の 
表現 が 使わ れ て いま す 。< ぐ table> は この よう な 構造 に 使用 し ます 。 使い 方 は 以下 の と お り で す 。 


・ 表 の 全体 を <table border="1"> 要素 で 表現 する 。 枠 の 太 さ は border 属性 で 指定 する 
・ 各行 ( 横 方 向 ) を <tr> 要素 で 表現 する 


・ 行 の 中 の 個々 の 要素 を <td> で 表現 し 、 そ の 中 に 表示 する 内 容 (文字 や 図 ) を 配置 する on 
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テー ブル の 構造 






ぐ く taDle> 


く 人 > 

| | | | | | 
く 人 『> 

| | | | | | 


行 ( 横 方 向 ) を 最初 に つく っ て 、 そ の 中 に 縦 方 向 の マス を 配置 し て いく の が ポイ ント で す 。 列 ( 縦 方 向 ) を 
最初 に つく る こと は で きま せん 。 






使用 例 html-maljor-element3.html 
く !DOCTYPE html> 
く html> 
く body> 
<h2> 今 日 の 試合 </h2> 
< く table border="1"> 
く tF> 
く td> く </td> く td>1 く /td> く td>2</td> く td>3 く </td> く td>4 く /td> く td>5 く /td> く td> 計 < く /td> 
く / て tF> 
く tF> 
く td> 横 浜 </td><td>1</td><td>9</td>< く td>6</td><td>2 く </td> く td>1 く / td> く td>4 く /td> 
く /tF> 
く tF> 
<td> 阪 神 </td><td>1</td><td>3</td><td>0</td>< く td> の </td> く td>9</td> く td>4 く /td> 
く / て tr> 
く /table> 
く /body> 
く /html> 
フラ ウザ 表示 結果 





慎 方 向 に マス を 連結 する 場合 は colspan 属性 を 、 縦 方 向 に 連結 する 場合 は rowspan 属性 を 使用 し ます 。 
連結 する マス の 数 を 属性 値 と し て 指定 し ます 。 縦 ・ 横 と も ぁ に < く td> 要素 の 属性 で ある こと に 注意 し て くだ さい 。 


使用 例 html-major-element4.html 


く !DOCTYPE html> 
く html> 
く head> 
く <META charset="UTF-8"> 
く /head> 
く body> 
<h2>col1span と rowspan</h2> 
< く table border="1"> 
く 人 ttF> 
く td>1 く / td> 
く td colspan="2">2 く </td> 
く /tF> 
く tF> 
く td>3 く /td> 
く td rowsDan="2">4 く /td> 
く td>5 く /td> 
く /tF> 
く て て F> 
く td>6 く /td> 
く td>7 く /td> 
く / て tr> 
く /table> 
く /body> 
く /html> 


回 回 遇 四国 
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フラ ウザ 表示 結果 


太 ] D:\Book\JavaScript\H1 


colspan と rowspan 








画像 の 表示 に は <img> 要素 を 使用 し ます 。 表示 する 画像 ファ イル は src 属性 で 指定 し ます 。 <a> 要素 は 
ハイ パー リン ク を 記述 する た め の も の で す 。 「 ほ か の 文書 ヘリ ンク を 張る こと で 、 関連 する 文書 を 簡単 に 結び つ 
ける こと が で きる | と いう 特徴 が あっ た か ら こ そ を 、HTML は ここ まで 普及 し た と いえ る で し ょ う 。 


く <a href=' 遷移 先 "> リン ク の 文字 列 </a> 
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遷移 先 に は 、 http://www.bing.com と いっ た URL や ファ イル 名 を 記述 し ます 。 


page1.html 「 page1.html 


く !DOCTYPE html> 
く html> 
く head> 
く <META charset="UTF-8"> 
く /head> 
く body> 
<h2> ペ ー ジ 1 : 画像 と リン ク </h2> 
く 1mg SFC="D1Cture9.]DgE” /> 
く Ul> 
く 1i>< く a href="httD : //www . google . Com/ ">Google< く /a> 人 へ く /11> 
く 1i><a href="httD : //www . bing . com/ ">B1ng< く </a> 人 へ く / ユ 1> 
く ]i><a href="page2 .htm1 ">Page2</a> 人 へ < く /11> 


く /ul> 
く /body> 
く /html> 
page2.html page2.html 
く !DOCTYPE html> 
く html> 
< く body> 
<h2> ペ ー ジ 2 : 画像 と リン ク </h2> 
く 1mg Src="book9.png” /> 
く u1> 
く 1i><a href="httD : //www . yahoo . co. ]p/ ">Yahoo</a> へ く / ユ 1> 
<1i><a href="http://www.1impress.co.jp/"> イ ンプ レス </a> へ </1i> 
く ]i><a href="page1 .htm1 ">Page1 く </a> へ く /11> 
く /ul> 
く /body> 
く /html> 


上 記 リ スト page1.html の ブラ ウザ 表示 結果 







 )( つ や) | 困 D:*BookwJavaScriptWHTML 〇 - 〇 | 回 D:\BookwJavaScrp.… * 
ー ジ 1 : 画 像 と リン ク 


.One mpress が 


も っ つと 曽 白い を 前 造 し よう 。 












リン ク Page2 を クリ ッ ク 
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リン ク 先 page2.html に 大 移 
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交 力 的 な が ページ づ くり に 画像 は 欠か せま せん 。 画像 自体 は <img> 要素 を 使っ て 簡単 に 表示 で きま す が 、 画 
像 の フォ ー マ ッ ト (形式 ) に は さま ざま な も の が あり 、 そ れ ぞ れ に 特徴 が ある こと は 把 握 し て お きた いと ころ で す 。 

コン ピュ ー タ で は 画像 は 単なる 点 の 集合 で す 。 点 の 数 が 多い の で 、 を の まま ファ イル に 保存 する と サイ ズ が 
非常 に 大 きく な っ て し まい ます 。 最も 古い 形式 の ひと つ で ある BMP は 、 を の まま 点 の デー タ を 保存 する の で 、 サ 
イズ が 大 きく な っ て し まい ます 。 


コン ピュ ー タ の 画像 は 点 の 集合 





ME - 内 
Aa v 、 


『 One impress 甘 請 語 』 


も っ と 際 白 い を 前 人造 し よう 。I 


デー タ サ イズ が 大 きい と 保存 容量 が 必要 に な る こと は も ちろ ん ダウ ン ロ ー ド に も 時 間 が か か り ま す 。 そこ で 、 


ファ イル の サイ ズ を 削減 し よう と きま ざま な 工夫 が な され て きま し た 。 現在 主流 と な っ て いる の は PNG と TPG で し ょ 
う 。 こ れ ら の 特徴 を 次 の 表 に まとめ て お きま す 。 
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PNG、JPG、BMP の 特徴 


アル ゴリ ズム 、 特 徴 












































画像 の ライ ン ご と に 情報 を 圧縮 。 
ae ピン グ 、 アイ コン . 欄 欄 可逆 ( 元 の デー タ に | た と えば 「1 100000000」 の よう な ビッ ト 列 は 「1 1 の 
レー エダ 9 し 人 戻す こと が で きる ) あと に 0 が 回 | と 記録 する と サイ ズ が 小さ く な る 。 透明 
色 が 利用 可能 。 
> me 
| に | 不可 逆 ( 元 の デー タ | 人 間 が 気づか な い 程 度 に 情報 を 削除 する こと で サイ ズ を 
| JPGG ジェ エー ペグ 写真 | ーー= ここ D \ ノ 昨 王 = 
| | に は 戻せ な い ) 圧縮 。 特に 写真 画像 の サイ ズ 圧 縮 が 得意 。 
連 PR ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー ーー 一 
| ビット マップ 、 各 ピ クセ ル (画像 を 構成 する 小さ べ な 点 ) の デー タ を その ま 
| ア の ナ 
BMP ビー エム ピー アオ ゴツ ょ し 保存 











既存 の 画像 ファ イル を 使用 する 場合 は あま り 間 題 に な り ま せん が 、 自 分 で つく 〈 っ た 画像 を 保存 する 際 に は 、 
フォ ー マ ッ ト を 選ぶ 必要 が あり ます 。 画像 に 応じ て 適切 な フォーマット 選べ る よう に な っ て くだ るい 


実際 に ファ イル サイ ズ を 比較 し て みよ う 


mspaint (Mac で は 「 プ レビ ュー」 ) な どの アプ リ を 起動 し 、 お 手持 ちの 写真 を 開い て (な い 場 合 は カ 
メラ か ら 撮 影 し た り 、 ダ ウン ロー ド し た り し まし ょ う ) 、JPEG、PNG、BMP それ ぞ れ の 形式 で 保存 し ま 
す 。JPEG、PNG、BMP の ファ イル サイ ズ を 比べ て み ま し ょ う 。 ま た 、 写 真 の 代わ り に 、 単 な る 沙 り 
つぶ し の 画像 や アイ コン な ど で も 同じ 作業 を や っ て み ま し ょ う 。 
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キキ ドキ ドキ ドド ドキドキ キキ キキ キネ キキ ドキ ボキ ボキ キキ ネギ ボキ ネギ キネ ボ ボネ ドド ネネ ネネ ネネ キキ ボキ ネネ キネ ネネ ネネ ネギ ボネ ネネ キ ボネ ネギ ネネ ボネ ネネ ボネ ネネ ネネ ギド ネネ ボネ ネネ ネネ ネネ ボネ ボド ボネ ネネ ネネ ネネ キネ ボネ ボネ ネネ ネネ ネネ ネネ ボネ ボネ ボネ ボキ ポポ ネネ ボボ ボネ ボキ ボネ ボネ ネネ キネ ボボ ネネ ボネ ネネ ボネ ネネ ネネ ネギ ネ ボネ ボド ボネ ネネ ネネ ネネ ネネ ネネ ネネ ボネ ボボ ネネ ネネ ボネ ボネ ネネ ボボ ボネ ネネ ボネ ネネ ネネ ボネ ネネ ネネ キネ ネネ ネネ ネネ ネネ ネネ キネ キネ キネ ネギ ネギ キネ ボド キキ ボキ ギド ギド NN や ボ や NNWNWNNN や や や や や や や や Pf や 








ここ まで 紹介 し た 要素 だ け で も いろ いろ な ペー ジ が つく れ ま す 。 
応用 例 1 
昌 D:wBookwJavaScriptwHTMLwcalendarht り ェ で 回 D:wBookwJavaScriptwH1 
2020 年 1 月 カレ ンダ ー ぐ h1> 要素 で 見 出し を 表示 
く img> 要素 で 画像 を 表示 





く table> く tr> く td> 要素 で 表 を 表示 








html-calendar.html 


応用 例 2 


朝  CWPMblcattonW ア ゲーム で 守 JavaScrpt 人 問 \SampiesYHTML て CSSWhtmi eope_himl のり ・ の きき CWPMptcatonw ゲ ー ム で 務 史 - テ 


所 を | 
ジャ ー マ ン ポテト 





く ul> で 箇条 書き を 、<ol> で 番 
号 付 き リ スト を 表示 





htmlrecipe.html 





HTML で 自分 の ペー ジ を つく っ て みよ う 


ここ まで 学習 し た 要素 を 使っ て 自分 で ペー ジ を つく っ て み ま し ょ う 。 ど ん な ペー ジ で も か まい ませ ん 。 自 
分 の 手 を 動か すこ と が 大 切 で す 。 意図 的 に 不正 な ペー ジ を つく り 、 ブ ラウ ザ で どの よう に 表示 され る か 
も 確認 し て みて くだ さい 。 作成 し た ペー ジ を 周囲 の 人 に 見 て も らい まし ょ う 。 


これ だ け で は 、 見 た 目 が 少々 現し いこ と は 和 否 め ま せ ん 。 HTML の 一 番 の 目的 は 文書 の 構造 を 表現 する こと 
で あり 、 ブ プラウザ 上 で の 表現 に は 重き を 置い て いな いか ら で す 。 見 た 目 は CSS (Cascading Style Sheet) で 
指定 し ます 。 文書 の 構造 と 見 た 目 を 分 離し て いる こと 、 これ は 非常 に 重要 な ポイ ント な の で ぜひ お さえ て お いて 
くだ さい 。 

実は 、HTML が 登場 し た 当初 は 、 文 書 の 構造 を 規定 する こと と 、 文 書 の 見 映え ぇ を 表現 する こと の 線引き が 
曖昧 で し た 。 ブ ラウ ザ の 開発 元 は 、 ホ ー ム ペー ジ の 表現 力 を 向上 きせ る た め に 、 新 し い 要 素 、 特 に 見 た 目 を 
充実 きせ る た め の 有 要素 を 競っ て 導入 し て いっ た の で す 。 た と えば 、 フ ォ ン ト を 指定 する <font> 要素 、 水 平 線 を 
りく く hr/> 要素 、 文 字 を スク ロー ル さ せる <marquee> 要素 、 文 字 を 点滅 きせ る <blink> 要素 し いっ た も の まで 


あり まし た 。 それ に よっ て 、 確か に 見 た 目 が 派手 な ペー ジ を 簡単 に 作成 で きる よう に な り ま し た が 、 そ の 反面 、 ブ 


ラウ ザ に よっ て 表示 が 異な っ て し まっ た り 、 HTML 本 来 の 目的 で ある 構造 化 が 忘れ られ て し まっ た り と 、 状 況 は 
混乱 の 一 途 を た どり まし た 。 

その よう な 状況 に 危機 感 を 抱い た 標準 化 団体 が 中 心 と な り 、 HTML の 表現 と 構造 を 分 離す る 作業 が 進め ら 
れ ま し た 。 そ の 成果 と し て 、 HTML は 構造 に 特 化 し た シン プル な も の と な り 、 表現 は CSS で 記述 で きる よう に 整 
理 さ きれ まし た 。CSS を 活用 する と 表現 力 に 富ん だ ペー ジ が 作成 で きる よう に な り ま す 。 本 人 節 の 例 で 紹介 し た レ 
シビ や カレ ンダ ー も も っ と 体裁 よく 表現 で きま す 。 


回 回 因 四 還 
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り - 統合 開発 環境 の すす め 


みな さん は これ か が から た くさ ん の HTML を 入力 する こと に な り ま す 。 効率 よく 入力 す 
る ため の ツー ル や アプ リ を 持っ て いる か 否 か で 作業 効率 が 大 きく 変わ っ て きま す 。 
今後 の 作業 を より 効率 よく 進め る た め の 統 合 環境 に つい て 説明 し ます 。 


Ge 統合 開発 環境 と は ) 


こま で HTML を 記述 する た め の ツ ー ル に つい て は 特に 言及 し ませ ん で し た 。 Windows の 場合 は メモ 帳 
em が 一 番手 っ 取り 早い か も る し れ ま せん 。 Windows キー を 押し て 「note」 と 入力 する と メモ 帳 が 検索 
され る の で 、 そ れ を クリ ッ ク す る と メモ 帳 が 起動 し ます 。 


OIITIIE| Mac で は 「 テ キス ト エ ディ ッ ト 」 が お 手軽 で す 。 「 フ ォ ー マ ッ ト 」 メニ ュー か ら 「 標 準 テ キス ト に 
する 」 を 選択 すれ ば プレ ー ン な テキ スト 形式 の ファ イル を 作成 で きま す 。 





実際 に 筆者 が 高校 で 授業 を し た 際 も 最初 は メモ 帳 を 使い は し た 。 し か し な が ら 、 メモ 帳 は 最低 限 の 機能 し 
か な いた だ ため 、 効 率 よく HTML を 入力 する こと が で きま せん 。 人 タイプ ミス を し た た だ ため に 正しく 表示 ・ 実 行き れ な いこ 
と も 多々 あり まし た 。 今後 の 作業 を より 効率 の よい も の に する た め に も 、 ぜ ひこ の 機会 に 統合 開発 環境 に 慣れ る 
こと を お 手 め し ます 。 

統合 開発 環境 と は ソー ス の 編集 、 画 面 デ ザイ ン 、 デ バッ グ 、 テ スト な ど ア プリ ケー ショ ン 開 発 に 必要 な 機能 
を ひと つ に 統合 し た ツー ル で す 。 本書 の 範囲 に お いて は ブラ ウザ で デバ ッ グ する と 思い ます の で 、 統合 開発 環 
境 と いっ て も HTML、 avaScript、CSS の 編集 を 行う 程度 の 利用 に 留まる か と 思い ます 。 それで も 開発 効率 は 
飛躍 的 に 向上 する は ず で す 。 

ここ で は 代表 的 な 統合 開発 環境 と し て Visual Studio と Aptana Studio を 紹介 し ます 。 も ちろ ん 、 これ 以外 に 
$ さ まさ まな 流 合 開発 環境 が ある の で 、 評判 の よい も の を 検索 し 、 最新 の 情報 を 参照 する よう に し て くだ さい 。 な 

お 、 本 書 で は 開発 環境 の イン スト ー ル 手順 詳細 まで は 言及 し ませ ん が 、 ぜ ひ 各 自 試し て お 気に入り の 環境 を 

見 つけ て くだ さい 。 


Visual Studio http://Www.microsoft.Com/ja-jp/dev/produocts/cCommunity.aSDx 

Microsoft か ら リ リー ス さ れ て いる 統合 開発 環境 で す 。 用途 に 応じ て さま ざま な バー ジョ ン が 用 意 き れ て いま 
す 。 本 書 の 男 胃 で あれ ば 無料 版 の Microsoft Visual Studio Community で 十分 で す 。HTML の タグ の 
チェ ッ ク 、 自 動 補完 、 JavaScript の 文法 チェ ッ ク な ど さ ま ざま な 機能 を 利用 する こと が で きま す 。 


Visual Studio 


PUE EDII VIEW DEBUG TEAM IOOLUS TEST や ANAUYZE 。 WINDOW HELP 
まほ ミ @・ の | 得 ・ 包 | 2- で -| baAmou・e| | - 


Community 2013 Discover Visual Studio 
COmmunity 20 は 


tart Get the most from Visual Studio with these 


「eGSOU「C て GS: 
Mew to Visuml Studio " Chwck out codinog butonals and 


ample DONW ぐ is 
Get も aimimd On new fameworiks、 IanouadeS and 





Visua| Studio Code httpsS://www.viSualStudiO.COom/ja-jD/Droducts/Code-VS.aSDx 

Visual Studio を ベー ス と し 、 ブ ログ ラム の 入力 に 必要 な 機能 に 特 化 し た も の で す 。 機能 が 限定 され て いる 
た め 、 動 作 $ 軽 く 、 イ ンス トー ル も 簡単 で す 。 Windows 版 だ け で な 〈、Linux、OS XX 版 も 提供 きれ て いま す 。 
本 書 の 革 囲 で は 、 この 環境 が お 勧め で す 。 


Aptana Studio httDp://Www.aptana.Com/ 
単体 版 (Gtandalone) と プラ グイ ン 版 (Echpse と いう 別 の 開発 環境 用 ) が 提供 され て いま す 。 Windows 版 
で は 、2015 年 8 月 時 点 で は 日 本 語 化す る た め に は 別途 プラ グイ ン を ダウ ン ロ ー ド する 必要 が あり ます 。 


Aptana Studio 

な 

テイ ル (『] 編集 {( ナビ ゲー ト (N) 検索 

YO sw ト ぞ マ ヽ て ご タマ O マ チュ (と 
プロ ジェ クト 。 | そつ 介 158 語 】 Aptans Studio 3 に つい て 


Aptana Studio 3. build- 3.6.1.201410201044 
(c) Copyright 2005 -2013 by Appceterator. Inc- Al 
rights reserved 


- る 邊 mw < 
マ ロー カル ・ フ ァイル シス テム 


Aptana Studio is licensed under the terms of the 
GNU Public Ucense (GPU) v3 (with exoeptons) 
Pilease vist htp/ ハ www_aptana.com/ieqal for 
mofe information 


の ら る S 中 9⑨ ヽ 


? amo ビー*ー 


> "上 g コ ン ソ ー ル 穫 Terminal ロ 問 題 ゃ 進行 状況 * 
き ” 四 この 時 点 で は 、 表 示す る 操作 は あり ませ ん 。 





統合 開発 環境 を 使う た め に は 、 最初 に 操作 方 法 を 覚え を がく て は な り ま せん 。 特に 最近 の 開発 環境 に は 非常 
に 多く の 機能 が ある た め 最 初 は ほし ま ど う か も る しれ ま せん 。 し か し 、 HTML、 avaScript で ソー スコ ー ド を 書く だ け 
で あれ ば 、 一 部 の 機能 し か 必要 と し な い は ず で す 。 す で に 慣れ る こと が で きる で し ょ う 。 ぜひ 最初 の 摩 を 乗り 越 
えて 統合 開発 環境 に 親しめる よう に な っ て くだ さい 。 


NIIOIITIIE ほ その ほか の Mac 版 の 開発 ツー ル に Intellid IDEA な ど が あり ます 。 


き vlS 導 遂 悦 必 貴 | 9-Z | 計上 GSSO 十 ] 負 上 HH 
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りう -0 CSS の 概要 


HTML で は 文書 の 構造 を 記述 し ます 。 し か し 、 見 映え と いう 点 で は 物足りな さ を 感 
じ ら れ た か も し れ ま せん 。 HTML 文書 の 見 た 目 を 記述 する の が CSS (Cascading 
Style Sheet) の 役割 で す 。 


( 2-6-1 | 見 映え を 担当 する CSS ) 


Web ペー ジ で は 、 単 に 文書 の 内 容 を 表示 する だ け で は 不 十分 で す 。 閲覧 者 が 読み や すい よう に 、 文字 の 
書体 や サイ ズ 、 文字 や 図形 の 色 や 配置 な ビデ ザイ ン に も 配慮 する こと が 大 切 で す 。 こ の よう な 見 映え に 関す る 
設定 も $、 昔 は HTML の タグ を 使っ て 行っ て いま し た 。 た と えば 、 以 下 の よ うな 具合 で す 。 


い 


CSS-Dbasic0.html 
く <!DOCTYPE htm]> 


く html> 
く head> 
く <META charset="UTF-8"> 
く /head> 
く body> 
普通 の テキ スト 
<center> 中 央 よせ </center> 
<font color="red"> 赤 色 の テキ スト </font> 
く br /> 
<font size="6"> 大 きい テキ スト </font> 
く /Dbody> 
く /html> 
フラ ウザ 表示 結果 


尼 ] D:\Book\JavaScript\CSS\ の - 〇 | 輸 D:Booka 


普通 の テキ スト 
中 央 よせ 


大 きい テキ スト 





この 例 の よう に 、HTML 中 に 見 映え に 関す る 指定 を 埋め 込ん で し まう と 、 そ の 文書 を いろ いろ な 用 途 で 使い 
回 す と き に 不便 で す 。 こ れ だ け で は ピン と こない で す よ ね 。 具体 例 を 使っ て 説明 し て み ま し ょ う 。 
だ と えば 、 パ ソン コン 用 の ペー ジ は 大 き な 画 面 を 想定 し て 作成 され ます 。 レイ アウ ト を 疑っ た ペー ジ に し て 、 た 
くさ ん の 情報 を 表示 する こと が で きま す 。 一 方 、 ス マー ト フ ォ ン を 想定 し て いる 画面 は 、 より シン プル に 、 文 字 を 
040 


小さ く 《 す る 必要 が あり ます 。 つ まり 、 見 映え に 関す る 指定 を HTML に 埋め 込ん で し まう と 、 その HTML を 使い 回 ~ 
すこ と が 難し く な っ て し まう の で す 。 


HTML で 見 映え を 指定 する と 別 の 用 途 に 使い 回 すこ と が 難し く な る 


スマ ー ト フォ ン 用 HTML 文書 


X 


ョ ーー 
ーー 


パソ コン 用 HTML 文書 





9-Z | 装 也 GSSO 十 ] 炊 上 H 


も し 、 文章 の 構造 ( 章 、 段落 、 見 出し な ど ) と 、 見 映え ( 色 、 文 字 の 大 きる 、 フ ォ ン ト な ど ) を 切り 離す こと が 
で きれ ば 、 見 映え の み の 修正 で 済む よう に な り ま す 。 こ れこ そ が 、 表 現 と 構造 の 分 離 に よる 利点 で す 。 実際 に 
は 、 文 章 の 構造 を HTML で 、 表 現 を CSS (Cascading Style Sheet) で 記述 し ます 。 


畑 茜 SSO | 


文書 の 構造 を HTML、 見 映え を CSS に 分 け て 記述 


スマ ー ト フォ ン 用 CSS 


- 





パソ コン 用 CSS 


た と えば 、 携帯 電話 の 画面 で 新聞 紙面 は 読み づら いで し ょ う 。 同じ 内 容 の 記事 で も 携帯 に 適し た 文字 や レ 
イア ウト に な っ て いる は ほう が 読み や すい こと は 言う まで も あり ませ ん 。 こ の よう に 文書 の 構造 と 表現 を 切り 離す と 、 
用 途 別 の CSS を 適用 する だ け で 、 いろ いろ な デバ イス に お いて 、 最適 な 状態 で 表示 する こと が 可能 に な り ま す 。 
つま り 、HTML 文書 を ほとん ど 修 正 し な が く て も 、 い ろ い ろ な 用 途 に 使え る よう に な る の で す 。 


( 2-6-2 カス ケー ド と は ? ) 

CSS を 使う と 見 映え を 制御 で きま す が 、 文字 や 段落 、 見 出し ご と に フォ ント や 人 色 な ど を 指定 する の は 面倒 で す 。 
CSS に は 、 そ の よう な 作業 を 軽減 する 便利 な 仕組 み が 容 易 さ れ て いま す 。 その カギ と な る の が カス ケー ド 
(Cascade) で す 。 
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042 





p カス ケー ド の 働き 





スタ イル の 具体 例 を 見 て いく 前 に 、|「 カス ケー ディ ング | の 意味 を 説明 し て お きま す 。 カス ケー ド (cascade) 
と は 、 滝 が 流れ る 、 流 れ 沙 ちる 、 と いう よう な 意味 で す 。 

た と えば 、 ト 図 の よう に 、 body 要素 に 「color:blue 」 と いう スタ イル を 適用 する と 、 その 文 書 全体 の 文字 が 青 
色 に な り ま す 。 を その 子 要 素 の <p> に 「font-styletalic] と いう スタ イル を 適用 する と 、<p> の 下 に ある 文字 が 
すべ て イタ リッ ク ( 終 体 ) に な り ま す 。 


スタ イル を 適用 し た 要素 お よび その 子 要素 全体 に 適用 され る 


く table> く table> 


く <body> color:blue <body> color:blue 
e:1talic 


これ は <b> で す 


アア デン 


つま り 、 ス タイ ル は 、 そ れ を 適用 し た 要素 だ け に 有効 に な る の で は な く 〈、 そ の 子 要 素 全 体 に 適用 きれ る の で 
す 。 こ れ が 、|「 カ スケ ー デ ィング | の 本 質 で す 。「 上 で 指定 し た スタ イル が 、 そ の 下 に 流れ て いく |」、 そ ん な イ 
メー ジ を 持っ て いた だ く と よい で し ょ う 。 こ の よう な 特徴 を 持っ て いる の で 、 文書 全体 の 見 た 目 を 一 括 し て 指定 し 、 
必要 な と ころ だ け 個 別に スタ イル を 適用 する こと が 可能 と な り ま す 。 

ちな み に 、 上 記 の スタ イル を 適用 し た 結果 は 、 次 の よう に な り ま す 。 文書 全体 が 青色 に 、 段落 の 内 容 が 斜 
体 に な っ て いま す 。 


CSS-Dbasic1.html フラ ウザ 表示 結果 


く !DOCTYPE html> 
く html> 
く head> 
く <META charset="UTF-8"> タ イ トリ レ 
く /head> 
く <body style="color : blue "> 
<h1> タ イ トル </h1> 
<p Style="font-style : ita]1ic"> 
これ は <b> バ パラ グラ フ </b> で す 
く /D> 
く /body> 
く /html> 


(< )( つ )| 罰 D:wBook*JavascriptwCs 


こ 嫌 だ ノイ ラグ ラフ で デ 





り -7 | CSS の 書き 方 


CSS を 使 つ こと 、 文 字 の 大 き さ や 色 は も ちろ ん 、 フ ォ ン ト の 種類 、 行 間 、 テ キス ト の 
配置 、 示 日 、 箕 明 度 な ご ど が 指定 で きま す 。 見た目 の 良い カッ コ い い ペ ー ジ を 作る の 
に CSS は 必要 不可 欠 で す 。 ぜ ひ 目 分 の も の に し て くだ さい 。 


( 27 | イン ライ ンス タイ ル で の 指定 ) 


を それ で は 、 この よう な スタ イル を どの よう に 指定 する の か 、 順番 に 見 て いく こと に し まし ょ う 。 も っ と る 簡単 な の は 、 
その 有 要素 の style 属性 を 使う 方 法 で す 。 


CSS-style0.html 


く !DOCTYPE html> 
< く html> 
く <head> 
く META charset="UTF-8"> 
く /head> 
く <body> 
<p style="co1or: red: "> 赤色 の テキ スト </p> 
<p style="color:green: font-size: 24px "> 緑色 , 24px</p> 
<p> テ キス ト の 一 部 に スタ イル を 適用 する 場合 は 、 
<span style="font-style : ita1ic">span 要 素 </span> を 使い ます 。 
く / D> 
く /body> 
く /html> 


フラ ウサ 表示 結果 


二 証 Lo 


ーーー ーー 


殺 D:\Book\JavaScript\CSS\ の - Q | 界 D:\BookwJavaScrip.… * 


赤色 の テキ スト 
緑色 , 24px 


テキ スト の 一 部 に スタ イル を 適用 する 場合 は 、 spa ヵ 要 馬 を 使い ます 。 





style 属性 は | style= color:green: font-size:24px: | と 例 に ある よう に 


CSS プ ロバ ティ 名 1 : 値 1: CSS プ ロ パ ティ 名 2: 値 2: … 





ot 内 SSSO | /-Z | 装 肛 GSSO 十 ] 釣 上 日 


と 指定 し ます 。 

妥 素 に よっ て 指定 で きる CSS 特 性 の 値 は 異な り ま す 。 た と えば <img> 要素 に font-style 特性 を 指定 し て る 無 
意味 だ と いう こと は 想像 が つく と 思い ます 。 た だ 、 無効 な 値 を 指定 し て も 無視 きれ る だ け な の で 、 最初 は いろ い 
ろ な CSS 特 性 を 記述 し て 、 表 示 が どの よう に 変化 する か 試し て みて くだ さい 。 





style 属性 を 試し て みよ う 


style 属性 を 使っ て 文書 の 見 た 目 が 変わ る こと を 確認 し て み ま し ょ う 。 後述 の 「 主 な CSS プロ パテ ィ | 
に スタ イル 特性 の 例 が 書か れ て いる の で 参考 に し て くだ さい 。 


(27.2 | CSS の 主 な プロ パテ ィ ) 

以下 の 表 に 使用 頻度 が 高い と 思わ れる プロ パテ ィ を 列挙 し ます 。HTML の 要素 と 同じ く 、 CSSG の プロ パテ ィ 
も 膨大 で 、 と て も すべ て を 覚え きれ る も の で は あり ませ ん 。 “た し か こん な 指定 が で きた よ な ぁ …"” と 概要 を 把握 し 
て お け ば 十分 で 、 詳 細 な 使い 方 は 必要 に 応じ て 都度 調べ る の が よい で し ょ う 。 
主 な プロ パテ ィ 

プロ パテ ィ 名 用 途 ・ コ メン ト 使用 例 













font-family: "Times New 
Roman ”, SanSs-Ser1f・: 
font-family: Aria]: 






フォ ント の 種類 を フォ ント 名 も し く は キー ワー ド で 指定 、 カン 


FOB マ で 複数 の 候補 を 指定 可能 

















px( ピ クセ ル )、pt( ポ イン ト ) な どの 絶対 値 や 、em( フォ ント 
の 高 さ を 1 と する 単位 ) な ど で サ イズ を 指定 、 大 き さ の 指定 
方 法 は 後述 


font-s1ze: 12Dpx: 
font-size: Smal1 : 
font-size: large: 


font-s1ize 





noOrmal( 通常 )、 italicC( イ タリ ッ ク 体 ) な ど フ ォ ン ト の スタ イ | font-style: ita1ic: 
ル を 指定 font-style: normal: 


font-style 


text-a1ign left( 左 礎 せ ). right( 右 寄 せ ). cnter( 中 央 揃 え ) 
justify( 均 等 割っ 付け ) な ど 文字 の 位置 や 割り 付け を 指定 


息 形 に 影 を つけ る 効果 を 演出 し ます 。 どの よう な 影 を つけ る 
box-shadow か を ( 右 方 向 の ずら し 下方 向 へ の ずら し ぼかし 具合 
京 2 の 色 ) と 4 つの 値 で 指定 し ます 。 


box-shadow: 19px 19px 19px 
rgba(9,9,9,9.4): 





CSS ス タイ ル に 関し て は 、Web 上 に も 情報 が た くさ ん あり ます し 、 書 籍 も 充実 し て いま す 。 詳し く は 専門 の 
ペー ジ や 書籍 を 参照 し て くだ さい 。 

それ で は 、 せ っ か くく 覚え た CSS プロ パテ ィ を 実際 に 使っ て み ま し ょ う 。 こ こ で は 、 次 の よう な ペー ジ を 作っ て み ま 
kW 


CSS-historyO.html 


く html> 
く head> 
く META charset="UTF-8"> 
く /head> 
く body> 
<h1 style="text-a1ign:center"> 安 士 桃山 時 代 </h1> 
<h2 sty1e="color:white: background-co1or: blue : "> 年 表 </h2> 
く table style="border: 1px solid blue: width: 699px : "> 
<tr><td>1573 年 </td><td> 室 町 幕府 が 事実 上 の 滅亡 </td></tr> 
く tr style="background-co1or:1ightb1ue : "><td>1599 年 </td><td> 豊 臣 秀 吉日 本 を 統一 </td></tr> 
<tr><td>1592 年 </td><td> 文 禄 ・ 慶 長 の 役 </td></tr> 
<tr style="background-co1or:1ightblue : "><td>1699 年 </td><td> 関 ヶ 原 の 戦い で 徳川 家康 が 勝利 
く /td> く / て tF> 
く /table> 
<h2 style="color:white: background-color : blue : "> 概要 </h2> 
く p> 
元 亀 4 年 (<span sty1e="co1or:red">1573</span> 年 ) に 信長 が 
<span style="co1or:blue "> 足利 義昭 </span> を 京 か ら 放逐 する と 、 
室町 幕府 は 事実 上 崩壊 し 、 織 田 政権 が 確立 する 。 
信長 は その 後 も 勢力 を 拡大 し 天下 統一 は 目前 と 思わ れ た 。 
し か し 、<span sty1e="co1or:blue "> 明智 光秀 </span> に よる 謀反 に よっ て 
天正 19 年 (<span sty1e="co1or:red">1582</span> 年 ) の 本 能 寺 の 変 で 自害 に 至っ た 。 
く / D> 
く p> 
<span style="co1or:blue "> 羽柴 秀吉 </span> は 
いち 早く 京 に 駆け 付け 首謀 者 で ある <span sty1e="co1or:b1lue "> 明智 光秀 </span> を 破っ た 。 
天正 14 年 (<span styl1e="color: red">1586</span> 年 ) に は 関白 ・ 太 政 大 臣 に 任 ぜ られ 豊臣 姓 を 賜り 、 
天正 18 年 (<span styl1e="co1or:red">1599</span> 年 ) に 日 本 を 統一 し 
全国 で 検地 と 妃 狩 り を 実施 させ 政権 の 安定 に 力 を 注い だ 。 
く /D> 
く /body> 
く /html> 
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フラ ウザ 表示 結果 
SD pxeoocomasopwcs > 
安土 桃山 時 代 


| 訂 東 が 事 実 上 の 江 
592 年 人 の 役 「 
00 涯 > で 2 いで 徳川 衣 康 が 勝利 


い 573 年 ) し 足利 義 88 を 京 か ら 放 遂 す る と 、 室 町 幕府 は 事実 上 月 壊し 、 織田 
pn 論 ツ する 。 信長 は その 後 も 勢力 を 拡大 し 天下 統一 は 目前 と 思わ れ た 。 し か し 、 明寺 
に よる 主 反 に よっ て 天正 10 年 (1582 年 ) の 本 能 寺 の 変 で 自害 に 至っ た 。 


索 誠 吉 は 竹本 けけ 時 抽 プ 0 を つた 。 天正 14 年 (1586 年 ) に 
問 太 政 大 違 に 働 ぜ られ 豊臣 姓 を 賜り 、 PU50058 に 日 本 を 統一 し 全国 で 検 
地 と 笠 り を 突 施 させ 政権 の 安定 に を 注い た だ 





ペー ジ の 見 た 目 は 改善 し ほし た が 、 HTML の ソー スコ ー ド は ゴチ ャ ゴチ ャ し て いま すね 。 た と えば 、 人 名 の 人 色 
と 見 出し の 背景 色 を 変え て ほし いと いう リク エス ト が あっ た と し まし ょ う 。 こ の 例 く らい の 分 量 で あれ ば 、 ひと つ ひ と 
つの CSS プロ パテ ィ を 書き 直し て も さほど の 手間 は か か ら な いか も し れ ま せん 。 し か し 、 何 十 ペ ー ジ に も 及ぶ 文 
書 の 場合 は 、 PS 

見 た 目 の 変 更 依頼 に 迅速 に 応え られ な い の は 間 題 で す 。 何 が 悪い の で し ょ うか ? 見 映え に 関す る 記述 が 文 
書 中 に 埋め 込ま れ て お り 、 文 書 の 構造 と 表現 が 分 離 で き て な いか ら で す 。 次 で は 、 文 書 と 見 た 目 の 分 離 を 一 
段階 進め て み ま し ょ 2 う 。 


( 2-7-3 | 文書 の 構造 と 見 た 目 の 分 苑 ) 


bb も も も も も も た も に も に も も た も た も に も に に も に に に も に も も も も も に に も に に も も も も も も も も も えも もえ えま まえ まま まえ まま ネネ ネネ ネ ネネ ネネ ミネ ミネ ネネ ネネ ネネ ネネ ネネ ミネ ミネ ミネ ミネ ミ ネネ ミネ ミネ ミネ ミ ミネ ミミ ミミ ミミ まま まま まま まま まま まる まま まま まま る まま まま まま まま まま まる まる まる まる るる る る ーー 


CSS は HTML 文 書か 6 ら 表現 を 分 離す る た め に 策定 され た も の な の で 、 梁 を そのため の 記法 が 用 意 き され て い 
ます 。 そ の カギ と な る の が セレ クタ で す 。 


k Style 要素 で の 指定 





HTML で は < く style> 要素 を 使っ て スタ イル を 一 括 し て 指定 する こと が で きま す 。 例 を 見 て み ま し ょ う 。 


CSS-history1.html 


く !DOCTYPE html> の 


く <html> ES 


く <head> 
< く style> 
際 も に も 


text-align: Center: 0 





h2 { 
font-style: 1ta]1icC: 
color: blue: 


pt 
Color: gray: 
font-s1ze : 14Dx : 
J 
く / style> 
く /head> 
く body> 
<h1> 幕 末 に お ける 国際 関係 </h1> 
<h2> 日 米 関係 </h2> 
く D> 
ベリ ー の 来航 目的 は 補給 港 と し て の 日 本 の 開港 が 第 一 で あっ た 。 
日 米 和 親 条約 に 基づき 、1856 年 8 月 21 日 (安政 3 年 7 月 21 日 ) に 
初代 米国 領事 タウ ン ゼ ント ・ ハ リス が 来 日 し た 。 
く / D> 
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く D> 
この よう に 開国 初期 に お ける 日 本 の 対外 関係 は 米国 が 中 心 で あっ た 。 
ハリ ス は 欧州 特に 英国 と は 異な る 外交 路線 を 採用 し て お り 、 
身 国 公使 ラザフォード ・ オ ー ル コッ ク か ら は 「 幕 府 寄 り 過 ぎる 」 と みな され る こと も あっ た 。 
く / D> 
く /body> 
く /html> 
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| D: \Book\JavaScript\CSS\ の ・ で | 加 D- \Book\JavaScrip.… X x 民 


幕末 に お ける 国際 関係 
層 科 人 


バリ ー の 来航 目的 は 補 結 港 と 。 て の 日 本 の 開港 が 紳一 で あり 、 通商 交 は 二 表 
的 な も の と な っ た 。 を う て 1854 年 中 1 日 【 落 永 ? 7 年 3 月 3 日 中 に 調 EI さ れ た 
日 米 和 親 条約 に - は 通商 条 条項 は 含 > うまれ な 日 2 洲 和 末 Ya - 基 .- うき 1856 年 
月 21 日 (安政 3 年 7 月 21 日) 人 米国 内 吉 タ 5 ウン ゼン が 来 日 し た 。 


この よう | に 開国 初期 に お ける 日 本 の ) 対 タ 財 開 係 は 米国 が 中 心 で あっ た 。 ハ リス は 
欧州 特に 英国 と は 異な る 外交 ra 線 を 抹 有 し て お り Sr 便 ラ ザ フ ォ ー ドド オー 
ルコ ッ ク が ら は 「 基 府 寄り 過ぎ る 」 と みな され る こと も あっ た 。 





<style> 要素 内 で の スタ イル 指定 は 以下 の よう に 行い ます 。 


セレ クタ { 
CSS プ ロ パ ティ 名 : 値 : 


| モレ クタ | と は 「 ど の 要素 に スタ イル を 適用 する か 」 を 記述 する ルー ル で す 。 < く hl> や <p> の よう に 要素 
名 を 書い た 場合 、 そ の タグ すべ て に スタ イル が 適用 きれ ます 。 適用 する プロ パテ ィ と その 値 は 「 プ ロ パ ティ 名 : 
値 :]」 の よう に 記述 し ます 。 プ ロ パ ティ 名 と 値 の 間 は | : | (コロン) で 区 切り ます 。 

復 色 の プロ パテ ィ を 適用 し た い 場 合 は 、 


セレ クタ { 
CSS プ ロ パ ティ 名 1 : 値 1: 
CSS プ ロ パ ティ 名 2 : 値 2 


の よう に 、 値 の うし ろ に |:] (セミ コロ ン ) を 書い て 区 切り ます 。 こ うす る と 、style 要素 の 中 を 修正 する だ け で 、 
文書 全体 の 見 た 目 を 一 括 し て 更新 で きる よう に な り ま す 。 た と えば 、<p> の テキ スト を グレ ー か ら 区 色 に 変え た 
い 場 合 に は |color: gray:」 を |「color: yellow:| に 書き 換え る だ け で 済む の で す 。 


本 ネル / セ コア シル: 


セ は どの 例 で は 要素 名 を セレ クタ と し て 使い は し た 。 し か し 、 実際 に 文書 を 作成 し て みる と 、 も っ と 和 柔軟 な 設 
定 を し た く な る は ず で す 。 じ つ は セレ クタ に は る ま ざ ま な ルー ル が 指定 で きま す 。 こ こ で は 代表 的 な セレ クタ の 
使い 方 を ご 紹介 し ます 。 


全 称 セレ クタ |*」 
文書 中 の すべ て の 要素 に 適用 きれ ます 。 


を も 


font-size: 12Dpx: 


タイ プ セ レク タタ 「 要 素 名 」 
指定 され た 要素 すべ て に 適用 きれ ます 。 以下 の 例 で は すべ て の <hl> 要素 が 斜体 に な り ま す 。 


h1 { 
font-style: 1tal1iC: 


ID セレ クタ 「#id」 
一 致す る id 属性 を も つ 要 素 に の み 適 用 きれ ます 。 id 属性 の 値 は 文書 中 で 一 意 (ほか に 同じ 値 を 持つ 要素 
が あっ て は な ら な い ) で な く 〈 く て は な ら な いこ と に 注意 し て くだ さい 。 


#SCOre { 
color: yellow: 


} 
<p> ス コア : <span id="score">59</span> 点 く /p> 


この 例 で は 、「50」 の み が 黄 色 で 描画 きれ ます 。 


ン ラ テラス セ レク が | タラス 名 1 

文書 中 の い 〈 つ か の 要素 に スタ イル を 適用 し た い 場 合 に 使用 し ます 。class 属 性 は HTML の 任意 の 要素 に 
指定 する こと が で き 、 そ れ ら に 対し て 一 括 し て スタ イル を 適用 する こと が で きま す 。 id 属性 と 異な り 、class 属性 
は 同じ 値 を 重複 し て 指定 し て も か まい ませ ん 。 た と えば 、 以下 の 例 で は 、 最初 と 3 番目 の h1 要素 の み 青 色 で 表 
示さ れ ま す 。 


回 加 回 四国 
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.bluetitle { 
color: blue: 
J 
<h1 cl1ass="bluetit]e">HTML の 基礎 </h1> 
<h1>CSS の 基礎 </h1> 
<h1 class="bluetitle">JavaScript の 基礎 </h1> 


その 他 の セレ クタ 






4 アル ルン NE 


指定 され た クラ ス を 持つ 要素 E p.test {color:blue: } 


E : nth-chi1d(n) n 番 目 の 子 と な る 要素 E Dp: nth-chi1d(3) {color : blue : } 











E:first-chi1d 
E:f1irst-l]etter 


ちな み に ぐ style> 要素 と セレ クタ を 使っ て 先ほど の 例 を 書き 直す と 以下 の よう に な り ま す 。 


p:first-chi1d {color:blue: } 






子 と し て 最初 の 要素 E 


要素 上 の 最初 の 文字 p:first-l]etter {color : blue : } 


例 





CSS-history2.html 


く html> 
く head> 
く <META charset="UTF-8"> 
< く style> 
h1 { text-align: center: } 
h2 { 
Color: white: 
background-color: blue: 
J 
#history { 
border: 1px solid blue: 
w1dth : 699Dx: 
J 
SDpan.year { 
color: red: EE す 
J 
Span.name て { 
color: blue: 
J 
tr:nth-chi1d(2n) { ャ 3 
background-color: 1ightblue : 
J 
く / Style> 
く /head> 
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く body> 
<h1> 安 士 桃山 時 代 </h1> 
<h2> 年 表 </h2> 
く <table 1d="history "> 
<tr><td>1573 年 </td><td> 室 町 幕府 が 事実 上 の 減 亡 </td></tr> 
<tr>< く td>1599 年 </td><td> 豊 臣 秀 吉日 本 を 統一 </td></tr> 
<tr><td>1592 年 </td><td> 文 禄 ・ 慶 長 の 役 </td></tr> 
<tr><td>1669 年 </td><td> 関 ヶ 原 の 戦い で 徳川 家康 が 勝利 </td></tr> 
く /table> 
<h2> 概 要 </h2> 
く D> 
元 亀 4 年 (<span cl1ass="year">1573</span> 年 ) に 信長 が 
<span class="name "> 足利 義昭 </span> を 京 か ら 放逐 する と 、 
室町 幕府 は 事実 上 崩壊 し 、 織 田 政 権 が 確立 する 。 
信長 は その 後 も 勢力 を 拡大 し 天下 統一 は 目前 と 思わ れ た 。 
し か し 、<span class="name "> 明智 光秀 </span> に よる 謀反 に よっ て 
天正 19 年 (<span cl1ass="year">1582</span> 年 ) の 本 能 寺 の 変 で 自害 に 至っ た 。 
く / D> 
く p> 
<span class="name "> 羽柴 秀吉 </span> は 
いち 早く 京 に 駆け 付け 首謀 者 で ある <span c1ass="name "> 明智 光秀 </span> を 破っ つた 。 
天正 14 年 (<span cl1ass="year">1586</span> 年 ) に は 関白 ・ 太 政 大 臣 に 任 ぜ られ 豊臣 姓 を 賜り 、 
天正 18 年 (<span c1ass="year">1599</span> 年 ) に 日 本 を 統一 し 
全国 で 検地 と 刀 狩 り を 実施 させ 政権 の 安定 に 力 を 注い だ 。 
く /D> 
く /body> 
く / html> 


皿 の |:nth-childm)」 は n 番 目 の 要 素 を 指定 する セレ クタ で す 。[ trnth-child(2n) | は 偶数 番目 の <tr> 要素 
と な り ま す 。 こ れ に よっ て 歴史 年 表 の 行 が 増え て も 偶数 行 に だ け ス タイ ル が 自動 的 に 付与 きれ る よう に な り ま す 。 

行 数 は 以前 より 多少 長く な り ま し た が 、 全 体 的 に すっ きり し て いる こと が わか る と 思い ます 。 メンテ ナン ス $ 容 
易 に な り ま す 。 仮に 「 年 号 を 黄色 に し て くれ 」 と 言わ れ て も 、 古 の [color: red:| を 「color: yellow:」 に 変え る 
だ け で 済み ます 。 

ここ で 、| <span class= red >| で は な 〈 く 、[ <span class='year > | と 、 ク ラス 名 の 値 に [" 色 "| と いう 表 
現 で は な く 〈 く 、[| 年 」 と いう 情報 を 使用 し て いる こと に 注目 し て くだ さい 。 <span class='"red"> で も スタ イル を 
適用 する こと は 可能 で す 。 し か し な が ら 、 文 書 の 構造 と し て は 、 年 号 と いう 情報 を 使っ て 文書 の 特定 の 箇所 に 
意味 を 写 え る べき で あっ て 、 赤 色 と い う 表 現に 関す る 情報 を 使う べき で は あり ませ ん 。 

この よう に ぐ style> 要素 を 使用 する こと で 、HTML の コン テン ツ の 中 (<body> 要素 の 下 ) か ら ス タイ ル 関 
係 の 記述 を 一 切な くす こと が で きま し た 。 文書 の 構造 と 表現 の 分 離 が 大 きく 前 進 し た の で す 。 
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o ーー 
ノー | ペー ジ の レイ アウ ト 
レイ アウ ト と は 配置 の こと で す 。 新聞 社 で 段 組み な どの 配置 を きめ る 担当 者 に は 大 
き な 権限 が 割当 て られ て いる と 聞い た こと が あり ます 。 読み や すい ペー ジ を 作る 
た め に 、 配置 (し レイアウト) は と て も 大 切な 作業 で す 。 本 節 で は HTML/CSS で の 
レイ アウ ト に つい て 見 て いき まし ょ う 。 


( 2-8-1 | ブロ ッ ク レ ベル 要素 と イン ライ ン 要 素 ) 

文書 の 構造 と 表現 が 完全 に 分 離さ きれ 、 レ イア ウト は CSS だ け で 記述 で きる の が 理想 で す 。 し か し 、 実 際 に 
は レイ アウ ト は CSS だ け で は な く 〈、 各 要素 と CSS と の 共同 作業 で 行わ れ ま す 。 

見 出し 要素 <h1> を 連続 し て 記述 する と 縦 方 向 に 並べ られ ます 。 


CSS-IayOutO.html フラ ウサ 表示 結果 


し 


<IDocTvPE htmz> 3)@ 


く html> 
く head> 
く <META charset="UTF-8"> 
く /head> 
く body> 
<h1> 国 語 </h1> 
<h1> 算 数 </h1> 
く /body> 
く /html> 





一 方 、<span> 要素 の 場合 は 横 方 向 に 並べ られ ます 。 





CSS-Iayout1.html フラ ウザ 表示 結果 









3 


< 


介 是 記 記 


く !DOCTYPE html> 
く htm1> 
く head> 
く <META charset="UTF-8"> 
く /head> 
く body> 
く span> 国 語 </span> 
<span> 算 数 </span> 
く /body> 
く /html> 
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この 人 違い は どこ か ら 〈 る の で し ょ うか ? 実は 、 HTML の 要素 は 大 きく ブロ ッ ク レ ベル ん 要素 と イン ライ ン 要 素 に わ 
けら れ ま す 。 





シス = レル オア ネム 本 


<h1> の よう に 縦 方 向 に 配置 る され る 要素 で す 。 追加 され る た びに 改行 きれ ます 。 ブ ロッ クレ ベル ん 要素 は 高き 
と 幅 を も ち 、 明 示 的 に 指定 し な い 限 り 、 幅 は ペー ジ 幅 ($ し く は 親 要素 の 幅 ) 、 高 き は その 中 に 含ま れる 要素 に 
あわ せら れ ま す 。<h]1>、<h2>、<p>、< く div>、<ol>、<ul>、<li>、 ぐ table> な どの 要素 が 該当 し ます 。 


縦 方 向 に ひと つつ づつ ペー ジ 幅 で 配置 され る 


ペー ン 幅 ( 親 要素 の 幅 ) 





<span>、 く a> 、 ベ ij> の よう に 横 方 向 に 配置 され る 要素 で す 。 文章 の 一 部 に 意味 を 付け た り 、 書 式 を 変更 
し た りす る と き に 使用 きれ ます 。 追加 する だ け で 改行 きれ る こと は あり ませ ん (<br> は 改行 する た め の 要 素 な の 
で 例外 で す )。 ペー ジ 幅 に 入り きら な く な っ た と き に 改行 が 行わ れ ま す 。 ブ ロッ クレ ベル 要素 の な か に 流し 込ま 
れる よう な イメ ー ジ と 考え る と わか りや すい で し ょ う 。 

イン ライ ン 有 要素 の 中 で も 、<button> 、<img> 、 く input> の よう に 高き と 幅 を も つも の を イン ライ ン ブ ロ ッ ク 要 素 
と 呼び ます 。 ま た 、 イン ライ ン 要 素 が ブロ ッ ク レ ベル 要素 を 含む こと は あり ませ ん 。 た と えば 、「 <span> く p>… 
く /p> く /span> 」 と いう 記述 は 正しく あり ませ ん 。 


横 方 向 に 配置 され ペー ン 幅 で 折り 返す 


ペー ン 幅 ( 親 要素 の 幅 ) 





ペー ジ を 作成 し て みる と 「 ス タイ ル を 指定 し て いる の に 、 思 っ た よう な 場所 や サイ ズ に 配置 され な い | と いう 
状況 に 何 度 も 遭遇 する こと に な る で し ょ う 。 そ の 多く は イン ライ ン 要 素 と ブロ ッ ク レ ベル ん 要素 を 混同 し て いる こと が 
原因 で す 。 

た と えば 、< ぐ span> 要素 に 高き や 幅 を 指定 し て も 有効 に な り ま せん 。 こ れ は 、 イ ン ラ イン 要素 に 高き を 指定 し 
て 6 無視 さき れる た めで す 。 一 方 、 <p> 要素 に 高き を 指定 する と その 指定 は 有効 に な り ま す 。 こ れ は <p> 要 素 が 
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ブロ ッ ク レ ベル 要素 だ か ら で す 。 
ブロ ッ ク レ ベル 要素 と イン ライ ン レ ベル 要素 に よる レイ アウ ト の 様子 は 、 要 素 の 輪郭 を 表示 する と よく わか り 
ます 。 
CSS-layout2.html 


く !DOCTYPE html> 
く html> 
く head> 
く <META charset="UTF-8"> 
< く Style> 
p, h1 { 
border: 1px dotted blue : 
け 
SDan { 
border: 1px solid red: 


く / style> 
く /head> 
く body> 
<h1>HyperText Markup Language</h1> 
く D> 
HyperText Markup Language (ハイ バー テキ スト マー クア ッ プ ラン ゲー ジ ) 、 
略記 ・ 略 称 <span>HTML</span> (エイ チ テ ィ ー エ ム エ ル ) と は 、 
ウェ ブ 上 の 文書 を 記述 する た め の マ ー ク アッ プ 言 語 で ある 。 
文章 の 中 に 記述 する こと で さま ざま な 機能 を 記述 設定 する こと が で きる 。 
く / D> 
く D> 
ウェ ブ の 基幹 的 役割 を 持つ 技術 の 一 つ で <span>HTML</span> で 
マー クア ッ プ され た ドキ ュ メ ント は ほか の ドキ ュ メ ント へ の 
<span> ハ イ バ ー リ ンク </span> を 設定 で きる 
<span> ハ イ バー テキ スト </span> で あり 、 
画像 ・ リ スト ・ 表 な どの 高度 な 表現 力 を 持つ 。 
く /D> 
く /body> 
く /html> 
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フラ ウザ 表示 結果 





え 


で こ eeesep 人 大 人 な 


HyperText Markup Language 


HyperText Markup Language (ハイ バー テキ スト マー クア ッ プ ラン ゲー ジ )、 遇 記 *・ 昭 
称 (エイ チ テ ィ ー エ ム エ ル ) と は 、 ウ ェ ブ 上 の 文書 を 記述 する た め の マ ー ク ア 
PL * あ る 。 文章 の 中 に 記述 する こと で さま ざま が 機能 を 記述 s2 定 する こと が で き 


ワ ェ ブ の 基 電 的 役割 を 持つ 技術 3 は ッ プ され た ドキ ュ メ ント は 
ほか の ドキ ュ メ ント へ の ーッ ン 設定 て ご る あり 、 画 像 ・ 
リス ト ・ 表 な どの 高度 な 表現 ナ ーー 





border と いう 枠 を 表示 する CSS プロ パテ ィ を 指定 し て いま す 。 詳細 は 次 項 を ご 覧 くだ さい 。 こ の 例 を みる と 、 
ブロ ッ ク レ ベル 有 要素 が ペー ジ 幅 に 広がっ て いる こと や 改行 が 行わ れ て いる こと 、 イン ライ ン 有 要素 が ブロ ッ ク レ ベ 
ル ん 要素 の 中 に 流し 込ま れ て いる こと が わか る と 思い ます 。 

どの 要素 が ブロ ッ ク レ ベル で 、 どの 要素 が イン ライ ン か は 使っ て いる うち に 自然 に 慣れ て くる と 思い ます が 、 ま 
ず は く ぐ p> 有 要素 、 <div> 要素 が ブロ ッ ク 有 要素 で ある こと だ け を 押さ えて くだ さい 。 そ の 際 に 、<p> は テキ スト 用 、 
<div> は ブロ ッ ク 有 要素 用 と 把握 し て お け ば よい で し ょ 2 う 。 


( 2-8-2 | ボッ クス モデ ル ) 

前 項 で は 、 ブロ ッ ク レ ベ ん 要素 は 高き と 幅 を 持ち も 、 デ フォ ルト で は 幅 は ペー ジ 幅 に 、 高き は 子 要素 に 合わ せ 
て 調整 され る と 説明 し まし た 。 で は 、 明 示 的 に サイ ズ を 指定 し た い 場 合 は どう すれ ば よい の で し ょ うか 。 CSS で 
は ボッ クス モデ ル と し て 、 以 下 の よ うな CSS プロ パテ ィ が 用 意 き れ て いま す 。 


ボッ クス モデ ル 関 連 の プロ パテ ィ 
プロ バテ ィ 説明 


これ ら の CSS を 使用 し て 、 幅 と 高き を 柔軟 に 指定 する こと が 可能 で す 。 必要 と し な い 場 合 は 単に 省略 し て く 
だ さい 。 こ れ ら の スタ イル を 図 に する と 次 の よう に な り ま す 。 
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ホッ クス モデ ル 


前 の ブロ ッ ク レ ベル 要素 


DrOWn fOx 
IUImDS OVer 
ithe Iazy dog. 


margin の 設定 例 













padding の 設定 例 
スタ イル 例 説明 


スタ イル 例 説明 










padding-left: 49Dpx: 左 の バディ ング を 指定 
padding-right: 29Dx: 右 の バディ ング を 指定 


border の 設定 例 
スタ イル 例 説明 


border-style: sol11d: ボー ダー スタ イル 、 solid, dotted, dashed な ど 


border: 2px solid blue: 幅 、 スタ イル 、 色 を まとめ て 指定 。 border-top-style. Dorder-left-color な どの 

















8-Z | 革 虹 SSO 圭 ] 和 LHS 


個別 指定 も 可能 
縦横 サイ ズ 、 そ の 他 の 設定 例 
スタ イル 例 説明 
( 2-8-3 | 色 や サイ ズ の 指定 ) 
意図 的 に モノ クロ に し て いる ペー ジ も あり ます が 、 ほ と ん どの ペー ジ は カラ ー を 効果 的 に 使用 し て いま す 。 ま 


テ さ NN へ で き S ペ ツー ス | 


た 、 意図 し た レイ アウ ト に な る よう に 、 フ ォ ン ト の サイ ズ や 幅 な ど を 指定 し て いま す 。 


p サイ ズ の 指定 


これ まで 、 フォン ト の 大 きる 、 要素 の 位置 や サイ ズ を | 100px 」 の よう に ピク セル 単位 で 指定 し て きま し た 。 実 
は 、 ビ ピク セル 以外 に も 以下 の よう に さま ぎ ま な 単位 が 利用 で きま す 。 


IT/ 
DX ピク セル 。 画面 を 構成 する 点 1 つ 分 
ポイ ント 。 1pt ニ 1778 イ ン テ 


| m] の サイ ズ 。 フォント の 「m」 の 大 き さ の 何 倍 か で 指定 
バー セン ト 。 親 要 素 の サイ ズ の 何 バ パーセント 分 か で 指定 





05/ 
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ニノ たか コ 


ここ まで の 例 で は 、white、lightgreen、yellow と いっ た 名 前 で 色 を 指定 し て きま し た 。 名 前 で の 色 指 定 は 
便利 な 方 法 で す が 、 名 前 が 思い 浮か ば な か っ た り 、 後 妙 な ニュ アン ス を 表現 で き な か っ た り と いう 問題 が あり ま 
す 。 

| 光 の 三原 色 ] は 、 赤 (Red) 、 緑 (Green) 、 青 (Blue) の 3 つの 光 を 組み 合わ せ て いろ いろ な 人 色 を 表現 
する 手法 で す が 、 この 手法 は 直感 的 に も わか りや すい の で コン ピュ ー タ の 世界 で も 広く 使用 きれ て いま す 。 スタ 
イル で も 、3 つ の 原色 を 使っ て 色 を 指定 する こと が 可能 で す 。 赤 、 緑 、 青 の それ ぞ れ の 色 を 0 一 255 ま で の 16 
進数 で 指定 し 、「#RRGGBB」 と いう 文字 列 に し ます 。 文字 は 大 文字 で も 小文字 で も か まい ませ ん 。 


16 進数 
10 進 数 で は 0 一 9 まで の 文字 を 使っ て 数 値 を 表現 し ます が 、 16 進数 で は 0 一 FF ま で の 文字 を 使用 し ます 。10 
進数 と 16 進数 の 対応 表 を 以下 に 示し ます 。 














10 進数 と 16 進数 の 対応 
0 進数 611l2l3j…|sleliellizltslilislie li7is 
16 進数 [99]91192193|…|98]e9]eAlegleclepleleFlielniliz 


10 進数 回 軸 軸 関所 癌 回 義 同時 還 閉 
6 進数 且 9 目 Al … 了 | … 隔 | 隔 | 隔 |…| 選 


10 進 数 か ら 16 進 数 の 変換 

10 進数 で は 、 8、 9、 10、 11… と 数 値 が 増え て いき ます が 、 16 進数 で は 8、 9、A、 B… と 数 値 が 増え て いき ま 
す 。16 進数 で は 、F が 一 番 大 き な 文字 な の で 、 を こ か ら 1 つ 増え る と 10 と な り ま す 。 

10 進数 の 165 か ら 16 進数 の A5 へ の 変換 は 以下 の よう に 、 16 で 割っ た 商 と 余り か ら 簡 単に 求め る こと が で き 
ます 。 コン ピュ ー タ の 世界 で は 16 進数 は 多用 され る の で 、 慣れ て いな い 方 は これ を 機 に 16 進数 に 親しむ よう に 
し て も だ さき ゆい 。 






10 進数 か ら 16 進数 の 変換 


165 す 16 三 10…5 A5 





RGB を 16 進数 に 変換 する と と も に 色 を 設定 する 例 を 以下 に 示し ます 。 ま だ T]avaScript の 説明 を し て いな い 
の で 、 中 身 は わか ら な く て る も 気 に し な いで くだ さい 。 


CSS-rgD-Color.html 
<!DOCTYPE htm1> 


く <html> 
く head> 
く <META charset="UTF-8"> 
く SCF1Dt> 
function setRGB() { 
var r = document.getElementById("r") .value : 
var g = document.getElementById("g") . value: 
var b = document .getElementById("b") .value : 
var Cc て = "#" + hex(r) + hex(g) + hex(Db): 
document. body . style .backgroundColor = Cc: 
document . getElementById("hex”) .textContent = C: 
J 
function hex(v) { 
V = parSeInt(V): 
var hex = v.toString(16): 
if (v く 16) { hex = "9 の 9"+ hex } 
return hex: 
け 
く / SCr1Dt> 
く /head> 
く body> 
<h1 style="background-color:white">RGB : <span 1d="hex"> く </ span>< く /h1> 
く D> 


R: く input type="range" m1n=" の 9” max="255" 1d="r” onchange="setRGB()" /><br /> 
G: く 1nput type="range”" min=" の 9" max="255" 1d="g” onchange="setRGB()" /><br /> 
B: く 1nput type="Frange” mln=" の 9” max="255" 1d="b” onchange="setRGB()” /> 
く / D> 
く /body> 
く /htm1> 


フラ ウザ 表示 結果 


RGB:#ac4 7de 
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ここ まで の まとめ と し て 、CSS プロ パテ ィ を 使っ て 前 の 章 で 作成 し た カレ ンダ ー を 装飾 し て み ま し た 。 


く !DOCTYPE html> 
く html> 
く head> 
く META charset="UTF-8"> 
く style> 
h2 { 
COlor: #9994ff: 
text-align: Center: 
J 
1mg { 
box-shadow: 19px 19px 19px rgba(9,9,9,9.4) : 
w1dth : 599Dx: 
け 
td { 
font-s1ze : 28Dx: 
text-align: center: 
border: 1px solid #CccccC: 
け 
.Fed { 
COlOr : Fed: 
J 
tr:nth-chi1d(2) { 
font-weight: bo1d: 
font-style: ita]ic: 
ナ 
td:first-chi1d { 
Color: red: 
J 
table { 
marg1n: 29Dx: 
J 
く / style> 
く /head> 
く body> 
<h2>2929 年 1 月 カレ ンダ ー</h2> 
く table> 
く tF> 
く td colspan="7"> 
く 1mg SrC="winter.]Dg" /> 
く / td> 
く / て tr> 
く tF> 


060 


CSS-Calendar.html 


く /tFr 
く 人 て F> 


く /tF 
く 人 て [> 


く /tF 
く 念 F> 


く /tr 
く て ttF> 


く /tFr 
く 人 て F> 


く td> 日 く </td> 
く td> 月 </td> 
<td> 火 </td> 
く td> 水 </td> 
く td> 木 </td> 
く td> 金 く /td> 
く td> 士 く </td> 
> 


く td> く / て td> 
く td> く / td> 
く td> く / td> 


く td class="red ">1 く /td> 


く td>2 く / 人 td> 
く td>3 く / td> 
く td>4 く </td> 
> 


く td>5 く /td> 
く td>6 く /td> 
く td>7 く /td> 
く td>8 く /td> 
く td>9 く /td> 
く td>1 0 の く /td> 
く td>1 1 く /td> 
> 


く td>12 く /td> 


く td class="red ">1 3 く /td> 


く td>1 4 く / て td> 
く td>15 く /td> 
く td>16 く /td> 
く td>1 7 く /td> 
く td>18 く /td> 
> 


く td>19 く / て td> 
く td>20 く /td> 
く td>21 く /td> 
く td>22 く /td> 
く td>23 く /td> 
く td>24 く /td> 
く td>25 く /td> 
> 
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く td>26 く / td> 


く ttd>27 く /t て td> 
く td>28 く /td> 
く td>29 く /td> 
くく td>3 の 9 く / て td> 
く td>31 く /td> 
くく td> く / td> 
く / て tr> 
く /table> 
く /body> 
く / html> 
フラ ウサ 表示 結果 
eeoneeswecse 5・ 19 pvooocouesrp- ・ 還 暫 まき 
2020 年 1 月 カレ ンダ ー 





12 3 | 14 | 15 | 16 | 17 | 18 
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HTML、CSS を 組み 合わ せ て いろ いろ な ペー ジ を つく っ て みよ う 


要素 、 セ レク タ 、 ス タイ ル 、 こ の 章 で 学習 し た こと を 活用 し て 、 時 間 割 、 ToDo リ スト 、 学級 新聞 な ど 、 
好き な ペー ジ を つく っ て みて くだ さい 。 本 書 で 紹介 し た CSS スタ イル は ご く < 一 部 で す 。 ほ か の 書籍 や 
ネッ ト の 情報 を 参考 に し な が ら 、 い ろ い ろ な スタ イル を 試し て み ま し ょ う 。 
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JavaScript の 基本 


JavaScript は 数 ある プロ グラ ミン グ 言 語 の ひと つ で す 。 ブ ラウ ザ さ え あ れ ば 試し て 
みる こと が で きま す 。 か つて は 敷居 の 低 さ か ら 入 門 用 言語 と みな され て いま し た が 、 
最近 で は その 良さ が 改め て 見 直さ れつ つ あ り ま す 。 Web サ イト 制作 で は 一 番 利用 さ 
れ て いる 言語 で も あり 、 動 的 な ペー ジ を つく る に は ある 程度 の 知識 は 必須 と いえ る 
で し ょ う 。 


E Je1deuo 





み 東 
に 


JavaScript 


ョ ーー = ミ 天 
う - | 」 プロ グラ ミン グ 言 語 JavaScript 
JavaSCriDt は 1995 年 に ブレ ンダ ン ・ ア イク (Brendan Eich) に よっ て 開発 さ 
れ ま し た 。 名 前 が 似 て いる た め に Java と 混同 され る こと も あり ます が まっ た く 別 の 
言語 で す 。 さ ぁ 、JavaScript の 冒険 の 旅 に で か け ま し ょ う ! 


( 3-1-1 | プロ グラ ミン グ 言語 と は ) 


そもそも ブロ グラ ミン グ 言語 と は 何で し ょ うか ? いろ いろ な 定義 が ある と 思い ます が 、 こ こ で は 「 コ ンピュータ に 
の の 


鉛 仙 する た だ ため の 言葉 」 と 考え まし ょ う 。 英語 を 話せ る と 世界 中 の 多く の 人 と コミ ュ ニ ケー ショ ン で きる よう に 
グラ ミン グ 言語 を マス ター する と コン ピュ ー タ に 全 負 で きる よう に な り ま す 。 


た と えば 、 一 般 的 な が リアルタイム ゲー ム の 処理 手順 は 以下 の よう に な り ま す 。 


、 ヽ プロ 


① いろ いろ な 用 意 (初期 化 ) を する 
(② キャ ラク ター の 移動 
ア ) 敵 の 移動 


イ ) 目 分 の 移動 (マウ ス 、 タ ッ チ 、 キー ボー ド の 入力 を チェ ッ ク ) 
ウ ) 衝突 判定 (衝突 時 は ゲー ム オ ー バ ー) 
③) 画面 の 更新 
ア ) 画面 を クリ ア 
イ ) 育 景 、 キ ャ ラク ター、 敵 な ど を 画面 に 描画 する 
④ 手順 ② に 戻る 


上 の 処理 手順 は 日 本 語 で 書か れ て いま す が 、 これ を コン ピュ ー タ に わか る よう に プロ グラ ミン グ 言 語 で 表現 す 
る と 、 実際 に ゲー ム が コン ピュ ー タ 上 で 実行 きれ ます 。 


世の中 に は た 《 ん の ブロ グラ ミン グ 言 語 が 存在 し ます が 、 動 的 ペー ジ を 実現 する た め の 言 語 と し て ひろ 〈 使 


ゴ 日 口 
用 され て いる こと 、 どの OS で も 手軽 に 試す こと が で きる こと な どか ら 、 本 書 で は ]avaScript と いう 言語 を 採用 する 
こま に し まし だ 。 


プロ グラ ミン グ 言 語 を 駆使 する と 複雑 な 処理 が で きま す が 、 ひ と つ ひ と つの 命令 


は 非常 に シン プル で す 。 主 
な 処理 命令 は 以下 の と お り で す 。 


・ 代入: | 変数 ] と いう 箱 に 数 値 や 文字 を 格納 する 

・ 演算 (計算 ) : 四則 演算 ( 足 算 、 引 算 、 掛 算 、 割 算 ) を 行う 
・ 比較 : ふた つの 値 が 同じ か どう か 、 大 小関 係 を 比べ る 

・ 条件 分 岐 : 比較 し た 結果 で 処理 の 手順 を 変え る 

・ 繰り 返し : 同じ 処理 を 繰り 返す 


次 節 か ら 、 これ ら の 基本 的 な 命令 を JavaScript で は どの よう に 記述 する か 見 て いき ます が 、 その 前 に まず 、 全 
体 的 な 処理 の 流れ を 把握 し て お きま し ょ う 。 


(3- -2 | JavaScript の プロ グラ ム 実 行 の 流れ ) 


の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の ④ の の の の @⑤ の の の の の の る @@@ の の oeeoeeoooeooooeeoeeoeoeoeooeeeeeeeoeeeeeeeeoeooeoo 


基本 的 に ブ プログ ラム は 記述 され た 順に 、 す な わ ち 、 上 の 行か ら 下 の 行 へ と 順番 に 実行 きれ て いき ます 。 


命令 は 順番 に 実行 され る 





さら に 、T]avaScript の 場合 、 ユ ニー ザー から の マウ スク リッ ク を 処理 し た り 、 一 定時 間 ご と に 実行 きれ る タイ 
マー 処理 を 実行 し た りな ど 、 何 ら か の 出来 事 (イベ ント ) が 起き た と き の 処 理 を 事前 に 記述 し て お きま す 。 


例 を 使っ て 説明 し まし ょ う 。 ToDo リ スト で すべ て の 仕事 を 管理 し て いる 人 が いた と し ます 。 出張 や 会 議 な ど 


業務 が 発生 し た ら 、 そ の 業務 は ToDo リ スト に 追加 され ます 。 そ の 人 は ToDo リ スト に 追加 きれ た 順に 、 ひ と つ 
ひと つ 業 務 を こなし て いき ます 。 それぞれ の 業務 に は 手順 書 が 用 意 き れ て お り 、 そ の 人 は 忠実 に を その 手順 を 実 
行 し ます 。 あ る 業務 が 終わ っ た ら 、ToDo リ スト に ある 次 の 仕事 に 取り か か り ま す 。 ToDo リ スト が 空 に な っ た ら 
や っ と 休 和 赴 で す 。 


プロ グラ ム の 流れ は ToDo リス ト を 順番 に 処理 する の と 似 て いる 


空港 で の 手続 き 


ToDo リ スト | 」 
空港 へ “ 


ホテ ル へ 、、 





親 
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JavaScript の プロ グラ ム も これ と 同じ よう に 処理 きれ て いき ます 。 ユ ー ザ ー か ら の 入力 、 タイ マー 実行 な どの 出 
来 事 (イベ ント ) は 「 イ ベン トキ ュー」 と いう ToDo リ スト に 追加 きれ ます 。 ブ ラウ ザ は 、 イベ ント キュ ー に 追加 き 
れ た 順に ひと つ ひ と つの 仕事 を こなし て いき ます 。 そ れ ぞ れ の イベ ント に は 「 関 数 ] と 呼ば れる 手順 書 が 用 意 き 
れ て お り 、 ブ ラウ ザ は る その 関数 を 実行 し ます 。 関数 の 実行 が 終わ っ た ら 、 次 の イベ ント の 処理 に 取り か か り ま 
す 。 も し 、 手順 書 が 見 つか ら な か っ た 場合 、 そ の イベ ント は 単に 無視 され ます 。 イ ベン トキ ュー が 空 に な っ た ら 
や っ と 休 和 超 で す 。 

JavaScript で は 、 関 数 は | function 」 と いう キー ワー ド で 記述 し ます 。 つま り 、 これ が JavaScript で の 手順 書 
と な り ま す 。functon の 外側 の 部 分 は 、 最初 に ペー ジ が 読み 込ま れ た と き に 1 回 だ け 上 か ら 順 番 に 実行 され ま 
す 。function の 内 側 の 部 分 は イベ ント が 処理 さき れる と き 、 先 の 例 で いえ ば ToDo リ スト の 仕事 を 実行 する と き に 
実行 きれ ます 。 そ の イメ ー ジ を 以下 の 図 に 示し ます 。 


function の 外側 は 最初 に 1 回 だ け 、function の 内 側 は イベ ント に 応じ て 実行 され る 


画面 が タッ チ さ れ た 、 
マウ ス が クリ ッ ク さ れ た 
な と の イベ ント が 発生 function() 関数 


次 の イベ ント を 待機 


タイ マー を 実行 する 
時 間 に な っ た function() 関数 
次 の イベ ント を 待機 





ちな み に 、 イ ベン ト に 対応 付け られ た 関数 は | イベ ント ハン ドラ | と 呼ば れ ま す 。 
いき な り 、 イ ベン ト 、 関 数 、 fhnction な どの 用 語 が で て きた の で 、 と まどっ た 人 も いる か も し れ ま せん 。 で も 、 の 
ちほ ど 詳 し い 説 明 が ある の で 心配 は ご 無用 で す 。 こ こ で は 、 


・ JavaScript の プロ グラ ム で は イベ ント に 対応 する 関数 function を 記述 し て お く 

・ 新しい 出来 事 (イベ ント ) は ToDo リ スト に 追加 され る 

・ ブラ ウザ は ToDo リス ト に 追加 され た 仕事 を 順番 に 取り 出し 、 イ ベン ト に 対応 する 手順 書 function が ある 場 
合 に は それ を 実行 する 


と いう こと を 理解 し て くだ さい 。 








う _ つ | 変数 と 演算 


加 回 四国 





コン ピュ ー タ は | 計算 機 」 と 訳 さ れる こと も ある くら い 、 計算 は 最も 得意 と する と こ 
ろ で す 。 プ ログ ラミ ング で も 計算 は 欠か すこ と は で きま せん 。 変数 に 値 を 格納 し 、 
その 変数 に 対し て 演算 子 を 使う つこ と で 加減 乗除 と いっ た 計算 を 行い ます 。 直観 的 で 
わか りや すい 負 理 だ と 思い ます 。 

(3-2-1 変数 の 宣言 ) 

変数 と は 値 を 格納 する 入れ も る の で す 。 入れ も の に は 名 前 を 付け られ ます が 、 そ れ を 「 変 数 名 | と 言い ます 。 
中 学校 の 数 学 で x や y を 使っ て 方 程 式 を 解い た と 思い ます が 、 この x や y こ そ が 変数 に ほか な り ま せん 。 
変数 は 値 を 格納 する 入れ も の 
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JavaScript で は 変数 を 使用 する 前 に 、 どん な 変数 を 使用 する の か 事前 に 宣言 する 必要 が あり ます 。 そ の た 
め に は 、var と いう キー ワー ド の あと に 空白 を 挿入 し 、 次 に 変数 の 名 前 を 書き ます 。 複数 の 変数 を 指定 する 場 
合 は 、 変 数 名 を カン マ で 区 切り ます 。 こ れ を 「 変 数 の 宣言 | と 言い ます 。 


INIOI[TIIE| 本 当 は 宣言 し な く て も 使用 で きる の で す が 、 バ グ の 原因 と も な る の で 必ず 宣言 する 癖 を つけ る 
よう つ に し て くだ さい 。 


Var Ss: // 変数 s を 宣言 
var r, score, point: // カン マ 区 切り で 複数 の 変数 を 宣言 


変数 を 冨 言 する と き に 、 | = 値 ] と 書く こと で 、 最初 の 値 (初期 値 ) を 設定 する こと が で きま す 。 あと で 見 直す 
と きのこ と を 考え て 、 変 数 名 に は わか りや すい 名 前 を つけ る よう 心掛け て くだ さい 。 

JavaScript の 変数 に は 、 数 値 、 文 字 な どい ろ い ろ な も の を 格納 する こと が で きま す 。 数 値 は を の まま 数 を 記述 
し ます が 、 文字 列 (文字 の 並び ) は "” もしくは ”「 で 囲み ます 。 


067/ 
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calculation.html 


・ // 変数 a を 宣言 し 、「3」 を 格納 を 「//」 以降 は コメ ント 
// 変数 b を 宣言 し 、「6」 を 格納 


Va『" 


Var 


a 
b 
C 
d 
e 
f 





var x = "hello": 
Var y = "wor1d": 
var Z= ニ x+ y:j: //z= "hel11owor1d" ゃ 衣 


変数 に 数 値 が 入っ て いる 場合 は 古 の よう に 四則 演算 が 可能 で す 。 文字 列 の 場合 、 足 し 算 を も する と 峰 の よう 
に 文字 列 が 連結 る きれ ます 。 


(helo) (worig helloworld 
MT リー 上 


コメ ント は 文字 どおり 「 注 釈 ] と いう 意味 で す 。 プ ログ ラム の 実行 に は 影響 を 与え を ませ ん 。 ほ か の 人 へ の 説 
明 だ っ た り 、 目 分 が 忘れ な いた め の メ モ 書 きだ っ た り 、 いろいろ な 用 途 に 利用 で きま す 。JavaScript で の コメ ン 
ト の 書き 方 は 以下 の 2 と お り が あり ます 。 


の  ⑨ @ 


> コメ ント 








1 行 コ メン ツン ト [/] 
スラ ッシュ | /| を 2 個 連 続 す る と その 後ろ か ら 行 末 ま で が コメ ント に な り ま す 。 


var a=3: // ご の うし ろか ら 行 末 ま で が コメ ント に な り ま す 


複数 行 コ メン ト 「/* ~ */」 
| *」 (スラ ッシュ と アス タリ スク ) か ら | y/」 まで の 部 分 が コメ ント と な り ま す 。 


/* 
ここ に 複数 行 に わた る コメ ント を 書き ます 。 
ここ に 複数 行 に わた る コメ ント を 書き ます 。 
と ご に 複数 行 に わた る コメ ント を 書き ます 。 
x/ 


コメ ント は 非常 に 便利 な ツー ル で す 。 し か し 、 コ メン ト を 潜 用 し な いよ う 注 意 し て くだ さい 。 シ ンプ ル で 誰が 見 
て も よく わか る 、 コ メン ト が な く 〈《 て も その 意図 が は っ きり 伝わる 、 そ ん な コー ド が 理想 で す 。 当たり 前 の こと を コメ ン 
ト で 記述 し た り 、 コ メン ト が な いと 理解 不能 だ っ た り 、 と いう よう な 状況 に 陥ら な いよ うに 心がけ まし ょ う 。 


(3-2-2 演算 ) 

加算 は |+」 記号 、 減算 は |] 記号 で す 。 こ れ ら は 直感 的 に わか る と 思い ます 。 プロ グラ ム で は 、 掛け 算 
の x は |「*| (アス タリ スク ) 、 割り 算 の = は 「/| (スラ ッシュ ) と いう 記号 を 使い は す 。「=」| は 値 を 代入 する と き 
に 使い ます 。 





Vara=6, b= 2: 


昌 
oh 
ト り 


義人 の きま 導 : 符 > テー アア で 
全 か 3 旦 ※ ャ ー ル アデ ご 相 


中 
し り 


var d 


余り を 求め る 場合 は 「%] を 使用 し ます 。 


Var a=5, b= 2: 


a%b: //c= 1 5 ょ 2 の 才 り は 1 


Va「 C 


また 、 プ ログ ラム で は 値 を 1 増やし た り 、 逆 に 1 減ら し た りす る こと を よく 行い ます 。 そこ で 、 専用 の 書き 方 が 用 
意 さ れ て いま す 。 


Var a=5, Db= 3: 
a++・: // a の 値 を 1 増やす ーーa は 6 に な る 
b--: // b の 値 を 1 減ら す ーb は 2 に な る 


ほとん どの 場合 、 計算 結果 は 変数 に 代入 する こと に な り ま す 。 





則 必 で 耕 注 | <-6 | 装 貞 ③1dIJOSBAET < 


069 


070 


Var a= 3: 
a=a+ 2: // と の 行 を 実行 し た あと 、a は 5 と な る 


読者 の な か に は |a= ョ + 2:] と いう 記述 に 違和感 を 覚え を る か も し れ ま せん 。 方 程 式 と し て 考え る と 、 こ の 式 
は な り た ち ま せ ん 。 ブ ログ ラミ ング 言語 の 場合 は 、 イコ ー ル の 右辺 を 計算 し て 、 を の 結果 を 左辺 に 代入 する 、 と 
いう 処理 手順 に な り ま す 。 

この 例 の 場合 、a は 3 で 初期 化 き 3 れ て いま す 。 よ っ て 、 右 辺 の a + 2 は 5 と な り 、 そ れ が 再び a に 代入 きれ ま 
す 。 つ まり 、 この 行 の 実行 が 終わ る と a の 値 は 5 に な り ま す 。 

変数 目 身 の 値 を 使っ て 計算 し 、 そ の 結果 を 自身 に 代 人 する と いう 処理 は 頻繁 に 行わ れる の で 、 以下 の よう に 
科 便 な 記法 が 用 意 る きれ て いま す 。 


Var a= ニ 3,b=3, CcC=3,.d=3: 

a+= 2: // a = a + 2: a は 5 に な る 
b -= 1: //b=b - 1: b は 2 に な る 
C *= 4: // c = c x* 4: c は 12 に な る 
d /= 2: //d=d/ 2: d は 1.5 に な る 


式 と 値 

式 と いう と 12+3=5」 と いっ た 計算 式 が 思い 浮か ぶ で し ょ う 。 し か し 、 プロ グラ ミン グ 言 語 で は 、 計算 式 だ け 
で は な く 〈、 実 行 し た 結果 、 最 終 的 に 値 が 求まる も の 全般 を 意味 し 、 た と えば 、 単 な る 値 や 変数 だ っ た り 、 一 定 
の 処理 を 実行 し た りす る こと まで 式 に 含ま れ ま す 。 


うっ _5 | 比較 と 条件 式 


比較 こ は 文 字 だ ご お り ふ た つの 値 を 比べ る こと で す 。 条件 式 と は その 比較 結果 に 応じ 
て 処理 の 流れ を 変え る た め の 命 令 で す 。 比較 と 条件 式 は プロ グラ ミン グ に お いて 最 
も 基本 的 で 大 切な 内 容 の ひと つ で す 。 ぜ ひし っ か り と 泊 得 し て くだ さい 。 


(3-3-1 比較 し た 結果 に 応じ て 処理 を 変え る ) 


ゲー ム を 実行 し て いる と 毎回 いろ いろ な こと が 起こ り ま す 。 た と えば 、 神経 衰弱 ゲー ム で は 、 同 じ 数 字 の カー ド 
を 開い た ら そ の カー ド は 開い た まま に な り ま す が 、 違 う 数 字 だ っ だ ら カ ー ド は 再び 裏返し で す 。 シュ ー テ ィング 
ゲー ム で 目 分 の 弾 が 敵 に あたっ た ら 敵 を 撃破 し ます 。 外れ た と き は 何 も 起 こり ませ ん 。 落ち モノ 系 ゲー ム で 同じ 
色 の ブロ ッ ク が 3 個 以 上 つなが っ た ら そ れ ら を 消去 し ます が 、3 個 未 満 の と き は 何 $ も し ませ ん 。 


神経 衰弱 ター acc ん に や ーー 4 に メン 。 


ゲー ム の 処理 判断 の 例 
ふた つの カー ド の 数 字 | 目 分 の 弾 が 敵 に 当たっ | 3 つ 以 上 同じ 色 が 並ん だ 
が 同じ か どう つか? た か ご ど つ が か? 










ゲー ム 
比較 する も の (条件 ) ae 


季 件 成立 時 の 処理 開い た まま 英 を 撃破 ブロ ッ ク を 消去 


この よう に 、 ゲ ー ム で は 時 々 刻々 変化 する 状況 に 応じ て 処理 を 変え て いく 必要 が あり ます 。 
これ ら の 例 に 共通 し て いる の は 、 








* 何ら か の 比較 を し て 
・ その 結果 に 応じ て 処理 を 変え る 


と いう こと で す 。 | 比較 し て 、 そ の 結果 に 応じ て 処理 を 変え る ]、 こ れ は プロ グラ ミン グ に お いて 最も 基本 的 な 処 
理 の ひと つ で す 。 ゲー ム に お いて も 同じ で す 。 い つも る 決ま っ た こと が 起き る よう で は ゲー ム に な ら な いで す よ ね 。 





で は 、 比較 処理 か ら 見 て いき まし ょ う 。 比較 処理 を 行う た め の 命令 を | 条件 式 ] と 呼び ます 。 条件 式 を 実行 
する と true (条件 が 成立 し た 場合 ) か false (条件 が 不成立 の 場合 ) が 結果 と し て 返さ れ ま す 。 主 な 条件 式 


は 以下 の と お り で す 。 









に 証 一 て 人 e 計 一 革 と 人 ゆー] ョ = ニ 3.bD= ニ 5 の 場合 


未 件 式 説明 
上 





回 回 回 四国 
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案 休 式 ( 盛 ペ ー ジ の 半 






秒 件 式 説明 a= ニ 3.bD=3 の 場合 a=3.b=5 の 場合 


和 件 式 の 挙動 を 実際 に 確認 する ペー ジ を 作っ て み ま し た 。 





条件 式 を 利用 し た 例 condition.html 
く html> 
く head> 
< く meta charset="UTF-8"> 
く SCF1Dt> 
function check() { 
var a = document .getElementById( "19") .value : < まち 


var b = document.getElementById( "11") .value : 
document .getElementById("r9") .textContent = (a == b): 2 
document . getElementById("r1").textContent = (a != b): 
document. getElementById("r2").textContent = (a < b): 
document . getElementById("r3").textContent = (a > b): 
document . getElementById("r4") .textContent = (a <= b): 
document. getElementById("r5").textContent = (a >= b): 
ナ 
く / SCr1Dt> 
く /head> 
く body> 
a: く 1nDut 1d="19" value="3" /> 
b: く 1nput 1d="11" value="5" /> 
< く button onclick="check( ) ">check</button> 
く ul> 
く 11>a == b : <span 1d="r9"></ span>< く /1 1> 
く li>a != D : <span 1d="F1"></ Span></1 1> 
く 1i>a く D : <span 1d="F2"></ span> く / 1 1i> 
く 1i>a > b : <span 1d="F3"></ Span></1 1> 
く 11i>a <= b : < く span 1d="r4"></ span></ 1 1> 
く 1i>a >= D : < く span 1d="r5"></ span> く /1 1> 
く /u1> 
く /body> 
く /html> 
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フラ ウザ 表示 結果 


(3③| 因 pemoeawsestves の こと | の pveowowes 
as8 ll5 _ | 


・a ニ = ニニ b: false 
・a に b: true 
*・a く b: true 
・a>b: 1 ね alse 
・a く < く ニ b : true 


・a> ニ b : false 





HTML に お いて 、<input> 要素 に 入力 され た 値 を 取得 する に は 玉 の よう に 


var 変数 = document.getE1ementById( "<input> 要 素 の ID") .value : 


と いう 命令 を 使い ます 。 結果 を 画面 に 表示 する に は 記 の よう に 


document . getE1ementById( "表示 する 要素 の ID") .textContent = 表示 内 容 : 


と いう 命令 を 実行 し ます 。 <button> 要素 が クリ ッ ク さ れる と 、 そ の 要素 の onclick 属性 で 指定 され た 内 容 、 前 
ペー ジ の 例 で は 関数 check() が 実行 きれ ます 。 input 要素 か ら 値 を 取得 し た り 、 画面 に 値 を 表示 し た りす る 方 
法 に つい て は 、「 3-7-3 JavaScript か ら HTML を 操作 する 」 (P.109) で 説明 し ます の で 、 こ こ で は | その よう な 
も の か 」 と 思っ て くだ さい 。 今 は 、 条 件 式 に つい て 慣れ る こと を 優 売 し て くだ さい 。 





前 記 の HTML を 入力 し て 実行 し て みよ う 
いろ いろ な 数 値 を 入れ て 条件 式 の 評価 結果 が どう な る か 実際 に 試し て み ま し ょ う 。 


(3-3.2 | 条件 式 一 『 文 ) 
条件 式 を 評価 する と true か false が 返さ れる こと を 見 て きま し た 。 次 に 、 そ の 結果 に 応じ て 処理 を 切り か える 
[制御 式 |] に つい て 見 て いき まし ょ う 。 最も よく 使わ れる の が 正文 で す 。 正文 は 以下 の よう に 記述 し ます 。 


if 文 の 書式 
if (条件 式 ) { 


命令 文 1: 
}) else { 
命令 文 2 : 


FT 関 RF 
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邊 件 式 が true の と き に 命令 文 1 を 実行 し 、 false の と き に 命令 文 2 を 実行 し ます 。 命令 文 2 の 実行 が 不要 な 
と さき は else 以降 を 省略 し て も か まい ませ ん 。 以下 の 例 で は 、 条 件 式 が true の と き に 命令 文 1 が 実行 きれ ます 。 


if (条件 式 ) { 
命令 文 1 : 
} 


項 に 、|A の 場合 は 命令 1、 B の 場合 は 命令 2、C の 場合 は 命令 3」 ・ … と いっ だ よう に 条件 が 複数 ある 場合 
に は 、else を 使っ て 条件 式 と 命令 文 の ペア を 必要 な だ け 連 続 し て 記述 する こと が 可能 で す 。 


if (条件 式 1) { 
命令 文 1: 

}) else if (条件 式 2) { 
分 令 文 2 : 

}) else { 
全 令 文 G: 


この 例 で は 、 条 件 式 1 が true の と き は 命令 文 1 が 、 条 件 式 2 が true の 時 は 命令 文 2 が 、 そ れ 以 外 の と き は 
命令 文 3 が 実行 きれ ます 。 簡単 な 例 を 見 て み ま し ょ う 。 


if 文 を 利用 し た 例 ifelse.html 
く html> 
く <head> 
く meta charset="UTF-8"> 
く SCr1Dt> 


function check() て { 
var a = document . getE]lementById("19") .value: 
var b = document.getEl1ementById( "11") . value : 
1f (a == b) { 
document . getElementById("resu1t") .textContent = "同じ !" 
J 
else { 
document . getE1ementById("resu1t") .textContent = "は ずれ " 


J 
く / scCr1Dt> 
く /head> 
く body> 
<h2> 神 経 衰 弱く </h2> 
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カー ド 1 :<input id="19" value="3" /> 
カー ドク 2 :<input 1d="i1" value="5" /> 
く <button onclick="check() ">check</button> 
く D 1d="Fesult"></D> 
く /body> 
く /html> 


フラ ウザ 表示 結果 


ペデ ジル | 固 D:\BookJava5cript\Java  ・ O | 候 D:wBookwavaScrp.… 


経 衰 双 


カー ド 15 か ヵ -Fe5 
は ずれ 





ボタ ン を 押す と ふた つの カー ド の 比較 結果 が 表示 され ます 。 同じ 数 字 な ら 「 同 じ I] と 、 違う 数 字 な ら 「 は ず 
れ 」 と 表示 され ます 。 非 常に 原始 的 な 例 で す が 、 実際 の 神経 衰弱 ゲー ム で も 同じ よう な 処理 を 行っ て いま す 。 


身長 と 体重 か ら 肥 満 度 を 判断 する 


身長 と 体重 を 入力 値 と し て 受け 取り 、BMI を 計算 し 、 そ の 判定 結末 を 表示 する ペー ジ を 作っ て くだ さ 
い 。BMI は 「 体 重 kg/( 身 長 m) <] と いう 計算 式 で 求め られ 、18.5 未 満 の 場合 に は 痩せ すぎ 、25 
以上 は 肥満 気味 、 そ の 中 間 は 標準 と され て いま す 。 


BMI.html 


く html> 
く head> 
く <meta charset="UTF-8"> 
く SCF1Dt> 
function calcBMI() { 
// と ご と に コー ド を 記述 し て くだ さい 
ナ 
く / SCr1Dt> 
く /head> 
く body> 
<h2>BMI 計 算 機 </h2> 


身長 (m) : <1input 1d="19" value="1.7" /> 
体重 (kg) :<input 1d="11" value="65" /> 
く button onclick="calcBMI( ) ">check</button> 
く D 1d="reSult "> く /D> 
く /body> 
く /html> 


回 回 回 旧 
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(3-3-3 | 複数 の 条件 式 を 組み 合わ せる 一 AND と OR ) 


やら oo の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の ららら の の の の の の の の の の の の の の の の の の の の の の の の の の の ら の の の の の の の の の の の の の の ひひ の の の の の の の の の の の の の の の ⑥ の の の ひひ の の の の の の の の の の の の の の の の の の の の の の の の ⑥ の の の の の の の の の の の の の の の の の の の の の の の の の の の 6 の の の の の の の 6 の の の 66@ の 9 の 6 の 9 の 8969OOOooooooooeses。 


泉 件 式 を ひと つ 以 上 組み 合わ せる 必要 に 迫 ら れる こと も ある で し ょ う 。 


・ | 残り 1 機 か つ 敵 の 弾 が 当たっ た 」 と いう 条件 の と き に ゲー ム オ ー バ ー に する 
・ | スペード も し くば クロ ー バ | と いう 条件 の と き に カー ド を オー プン する 
・ | ある 数 値 が 100 以上 みつ 200 未満 | の と き に 当たり と する 


ゲー ム に よっ て いろ いろ な 状況 が 考え られ る で し ょ う 。 個々 の 条件 式 は 複数 組み 合わ せる こと が で きま す 。 


・AND 条 件 式 。 条件 式 1 && 条件 式 28& 条件 式 3 … 
・OR 条 件 式 。 条件 式 11| 条 件 式 21| 条件 式 3… 


AND 条 件 式 は 「 かつ] で す 。 す べ て の 条件 式 が true の と き に 全体 が true と な り ま す 。 一 方 、OR 条件 式 
は | もしくは 」 で す 。 個々 の 条件 式 の どれ か が true の と き に 全体 が true と な り ま す 。 例 を 見 て み ま し ょ う 。 


var a= true && true && true: // a = true 
var b = true && false && true: // b = false 
var c= true && true && false: // c = false 
vard=true || false || false: // d = true 
var e=false ||| true || false: // e = true 


varf=false || false || false: // f = false 


以下 の よう に AND と OR を 組み 合わ せる こと も 可能 で す 。 


(条件 式 1 && 条件 式 2) || (条件 式 3 && 条件 式 4) 


この 例 で は 、 条件 式 1 と 条件 式 2 が と も に true か 、 も し く は 、 条件 式 3 と 条件 式 4 が と も に true の と き に 全体 が 
true と な り ま す 。 
AND 条件 と OR 条件 を テス ト す る ペー ジ を 次 に 示し ます 。 
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AND 条件 と OR 条件 を テス ト す る ペー ジ andor.html 


く html> 
く <head> 
く <meta charset="UTF-8"> 
く SCF1Dt> 
function update() { 
var a = document . getElementById("a") .checked: 
var b = document . getElementById("b") .checked: 
var c = document . getElementById("c") .checked: 
document . getElementById("r9”).textContent = (a && b && Cc): 
document . getElementById("r1”).textContent = (a || b || c): 
J 
く / scr1Dt> 
く /head> 
く body> 
<h2>AND/OR テ スト </h2> 
A: く 1nput 1d="a” type="checkbox" onchange="update()” /> 
B: く 1nput 1d="b” type="checkbox" onchange="update()” /> 
C: く 1nput 1d="c” type="checkbox" onchange="update()” /> 
く D> 
A && B && C => <span 1d="r の "> く /span>< く br /> 
A || B || C => <span 1d="r1"></span> く br /> 
く / D> 
く /body> 
く /html> 
フラ ウサ 表示 結果 


如 ] D:\Book\JavaScript\Javag D・ で | 昼 p 


AND/OR テ スト 
A: 軌 B HCL 


AA&AEB&AC=> lse 
AIBIIGC> ぅ > tmue 





複数 の 条件 式 の 判断 
以下 の よう な 条件 式 が あっ た と し ます 。 


if (条件 式 1 && 条件 式 2 && 条件 式 3 && 条件 式 4) { 


和 件 式 が 組み 合わ きれ た 場合 、 左 か ら 右 へ 順番 に 評価 が 行わ れ ま す 。 す な わ ち 、 条 件 式 1 一 条件 式 2 
条件 式 3 つ … と 実行 きれ ます 。 こ こ で 、 条 件 式 2 が false だ っ た と し ます 。 こ の 時 点 で 、 全体 の 条件 式 は false と 
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な り 、 条件 式 3 や 4 が 評価 され る こと は な く 〈 く な り ま す 。 な ぜ だ か わか り ま すか ? 届 和 で 複数 の 条件 を 組み 合わ せ 
た 場合 、 ど れ か ひと つ で も false だ と 全体 が false に な り し た よね 。 つま り 、 ひ と つ で も false が ある と 、 そ の 時 上 で 
全体 の 結末 が 決ま っ て し まい 、 そ れ 以 降 の 条件 式 を 実行 する こと は 無駄 に な る か ら で す 。 一 方 、 


if (条件 式 1 || 条件 式 2 || 条件 式 3 || 条件 式 4) { 


と いう 条件 式 の 組み 合わ せ が あ っ た と し ます 。 こ の 場合 6 条件 式 1 一 条件 式 2 つ … と 左 か ら 評 価 が 行わ れ ま す 。 
どれ か ひと つ で $ 結 果 が true に な っ た 場合 に は 、 その 時 点 で 条件 式 の 評価 は 中 止 さ れ 、 条件 式 の 組み 合わ せ 
結果 は true と な り ま す 。 

JavaScript を 見 て いる と 以下 の よう な 記述 を みか ける こと が あり ます 。 


vara=blll| 3: 


一 見 する と 何 が し た い の か わか り づ らい 記述 で す が 、 条 件 式 の 挙動 を うま く 利 用 し た 一 例 で す 。b に 何ら か 
値 が 入っ て いれ ば 、 a に は b の 値 が 代入 きれ ます 。b に 値 が ある と いう こと は 条件 式 の 評価 で は true と みな され 、 
| より 右 は 実行 きれ ませ ん 。 

一 方 、b に 値 が 何 $ も 入っ て いな い 場 合 、 条 件 式 b は false と みな され 、|| より 右 の 条件 式 の 評価 が 行わ れ ま 
す 。 こ の 場合 は 、 評価 結果 は 3 と な り 、a に は 3 が 代入 る きれ ます 。 つま り 、 デ フォ ルト の 値 を 簡単 に 設定 する こと 
が で きる の で す 。 知っ て いる と 便利 な 小 技 の ひと つ で す 。 


( 3-3-4 | 条件 式 switch 文 ) 


条件 の パタ ー ン が 多い と き に 、else if を 連続 し て 使い た く な る か も し れ ま せん 。 
elseifelseif.html 


く html> 
く head> 
< く meta charset="UTF-8"> 
く SCF1Dt> 
window.onload = function () { 

Var Str = ""・ 
var day = new Date().getDay(): e 誕 
1† (day == の ) { 


SS るー 
} else if (day == 1) { 
StF ー "月 "・ 


} else if (day == 2) { 





5 の 。 
) else if (day == 3) { me 

str ーッ 水 に 介 
} else if (day == 4) { 

str = " 木 ": 『- 抽 還 
}) else if (day == 5) { ーー デ 

str = " 金 ": 
}) else if (day == 6) { 

も P だ 1 


ナ 
document . getElementById( "day") .textContent = str: 


ナ 
く / SCF1Dt> 
く /head> 
く <body> 
<h1> 今 日 は <span id="day "></span> 曜 日 </h1> 
く /body> 
く / html> 
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訓 の getDay() は 曜日 を 返す 関数 で す 。 |new Date(0.getDay0」 で 今日 の 曜日 が 取得 で きま す 。 こ の 程度 
の 例 で あれ ば 、else if が 連続 し て も 見 通し は それ ほど 悪く あり ませ ん が 、 条 件 式 が 複数 行 に な っ て くる と 、 一 目 
で は 何 を し て いる の か わか り に くく 〈 く な り ま す 。 

ある 変数 や 式 の 取り 得る 値 が 複数 パタ ー ン あり 、 そ れ ぞ れ に 別 の 処理 が 必要 な 場合 は 、else 下 で は な く 
switch 文 を 使う こと が で きま す 。 swritch 文 は 以下 の よう に 記述 し ます 。 


switch 文 の 書式 


switch (変数 も し く は 式 ) { e 敵 
CaSe 7 ジル 
命令 文 
break: 
CaSe ps WE 
命令 文 
break: 
default: 
命令 文 : 
break: 


switch の 直後 の か っ この 中 に 変数 も し く は 式 を 記述 し ます 凡 。 そ の 値 が 値 1 だ っ た と き に 命令 文 1 が 峰 、 値 
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2 だ っ た と き に 命令 文 2 が 医 … と いう よう に パタ ー ン ご と に 適切 な 命令 が 実行 きれ ます 。 

case 値 の 後ろ は 「:] (セミ コロ ン ) で は な 〈「| : 」 (コロ ン ) で ある こと に 注意 し て くだ さい 。 

それ ぞ れ の パタ ー ン の 命令 文 の 終わ り に は break を 挿入 し 回 回 、 処 理 が そこ で 終了 する 則 を 明記 し ます 。 
break を 入れ 忘れ る と 、 次 の case も 続け て 実行 きれ て し まい ます 。 こ の 動き を 意図 的 に 使う 人 も ねい ます が 、 わ か 
り に くい バグ に つなが る の で 、 各 case の 処理 が 終了 し た と き に は 必ず break を 挿入 する 習慣 を つけ た ほう が よ 
いで に よう 。 

値 が どれ に も 該当 し な い 場 合 も ね カバー し た い 場 合 は case の 代わ り に default を 記述 し ます 。 先ほど の 例 を 
switch で 書き 換え た 例 を 以下 に 示し ます 。 


Switch.html 


く html> 
く head> 
く <meta charset="UTF-8"> 
く SCF1Dt> 
w1ndow.onload = function () { 
var StF = 「: 
Var day = new Date() . getDay() : 
Switch (day) { 
CaSe 9 の: 
S も P = モー 円 お Peak: 
CaSe 1: 
str = "月 ": break: 
CaSe 2: 
Str = " 火 ": break: 
CaSe 3: 
Str = " 水 "・ break・ 
CaSe 4: 
str = " 木 ": break: 
CaSe 5: 
str = " 金 ": break: 
CaSe 6: 
StF = ” 二 アテ : break: 
J 
document . getElementById( "day") .textContent = str: 
J 
く / SCF1Dt> 
く /head> 
く body> 
<h1> 今 日 は <span id="day "></span> 曜 日 </h1> 
く /body> 
く /html> 


若 十 見 通し が よく な っ た 気 が し ませ ん か ? 
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西暦 か ら 十 支 ( 十 千 と 十二支 ) を 表示 する 


以下 に 示す ペー ジ を 元 に 、 西暦 か ら 干 支 ( 十 千 と 十二支 ) を 表示 する ペー ジ を 作っ て くだ さい 。 十 千 
は 西暦 を 10 で 割っ た 余り か ら な り 、 余 り が 0 か ら 順 に 廣 , 辛 , 王 , 圧 , 甲 , 乙 , 内 , 丁 , 成 , 己 と な り 
ます 。 十二支 は 西暦 を 12 で 割っ た 余り か ら な り 、 余 り が 0 か ら 順 に 申 , 西 , 成 , 支 , 子 , 時 , 寅 , 
辰 , 巳 , 午 , 未 と な り ま す 。 


Switch-eto.html 


く html> 
く head> 
く <meta charset="UTF-8"> 
く SCF1Dt> 
function calc() { 
var y = document.getElementById("year") .value: 
け 
く / SCr1Dt> 
く /head> 
く body> 
く <h2><span 1d="y"></span> 年 の 十 支 は <span id="e"></span></h2> 
く D> 
く 1nput 1d="year" value="2916"/> 
<button onc1ick="ca1c() "> 計算 </button> 
く / D> 
く /body> 
く /html> 
フラ ウザ 表示 結果 


奏 ) C*Publicatonw ゲ ー の ェ の 0 A 
2016 年 の 十 支 は 内 申 
oe | 四 欄 | 


ー ロ 4 
参 ) c*Publicattion ゲ - の ェ の 4 


2020 年 の 十 支 は 諾 子 










( 3-3-5 | 条件 式 三 項 演算 子 ) 

復 雑 な else は switch で シン プル に な る 場合 ちあ あわ る こと を 見 て きま し た 。 逆 に [true の と き は 値 A、false の 
時 は 値 B を 代入 する 」 と いう よう に 非常 に 単純 な 条件 分 岐 が 必要 に な る こと も あり ます 。 も ちろ ん 文 を 使っ て も 
記述 で きま す が 、 JavaScript を 含む 多く の 言語 で は 、 単純 な 条件 分 岐 を より 簡潔 に 記述 する た め に 三 項 演算 
子 と いう も の が 用 意 き れ て いま す 。 次 の よう に 記述 し ます 。 





洪 次 Y 送 民 | 6-e | 斗 隊 ③1dI』JOSBABT 3 
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条件 式 ? 命令 文 1 : 命令 文 2 


条件 式 が true の と き に 命令 文 1 が 実行 され 、 false の と き に 命令 文 2 が 実行 きれ ます 。3 つ の 要素 (ひと つの 


条件 と ふた つの 命令 文 ) を 1?| と | :」 と いう 演算 子 で 関連 付け る の で 「 三 項 演算 子 」 呼ば れ ま す 。 
例 を 見 て み ま し ょ う 。 


document .getElementById("info").textContent = (vV%2==9@) ? "even” : "odd": 


変数 vV の 値 が 偶数 で あれ ば 画面 に 「even] と 表示 され 、 奇 数 で あれ ば |「odd] と 表示 る れ ま す 。 

% は 祭り を 求め る 演算 子 で す 。2 で 割っ た 余り が 0 な ら 条 件 式 が true と な り 、 最初 の 命令 文 が 実行 され ます 。 
上 の 例 で は 単なる | even」 と いう 文字 列 な の で 、 その 値 が |info」 と いう id 属性 を 持つ 要素 の textContent に 
代入 きれ ます 。 


if 文 を 使っ て この 例 を 記述 する と 2 一 3 行 は 必要 に な る で し ょ う 。 単純 な 条件 処理 で あれ ば 三 項 演算 子 を 使 
うと 簡便 に 記述 で きま す 。 


ちな み に 、「 計 十 :] | 叶 -:] の よう な 演算 子 を | 単項 演算 子 」 と 呼び ます 。 |「+」] |-] | 1/] 1%] と いっ 
た 演算 子 は ふた つの 数 値 の 演算 行う 2 の で | 二 項 演算 子 ] と 呼ば れ ま す 。 


う - 4 配列 と 繰り 返し 


ここ で は 、 和 複数 の 値 を 一 括 し て 管理 する 配列 て 、 そ れ ら を 繰り 返し て 処理 する 方 法 
に つい て 学び ます 。 配列 は どの プロ グラ ミン グ 言 語 で も 基本 と な る 要素 で す 。 し っ 
がり マス デー し まし ょ う 。 


旨 半 回 肖 還 





( 3-4-1 | 配列 の 使い 方 ) 

同じ 種類 の も の が た 〈 さ ん ある 場合 、 そ れ ら を 順番 に な ら べ る と 扱い や すく な り ま す 。 実生 活 で も 、 出 席 番 号 
順に 生徒 を 整列 きせ る 、 テス ト の 平均 点 を 計算 する な ど 、 さま ざま な 状況 で 行っ て いる 作業 で し ょ う 。 プロ グラ ミ 
ング で も 同じ で す 。 区 ブ キ ャ ラク ター、 沙 ち て くる ブロ ッ ク 、 敵 の 弾 (座標 や 速度 向き ) 、 ト ラン プ カ ー ド な ど 、 同 
じ 種 類 の も あの が た く 〈 さ ん ある 場合 に 、 そ れ ら を 並べ て 管理 し ます 。 

だ と えば 、5 人 の 点数 の 平均 を 計算 する 必要 が あっ た と し ます 。 


て 魏 ご 簿 当 可 | ャ -E | 装 了 ③1dIJOSBAB 


Var SCoreA = 59, scoreB = 7 の 9, scoreC = 37, scoreD = 99, scoreF = 67: 
Var average = (ScoreA + scoreB + scoreC + scoreD + scoreE) / 5: 


5 人 位 な ら な ん と か な り ま す 。 し か し 、 これ が 100 人 に な っ た ら ど う で し ょ うか ? 100 個 も 変数 を 宣言 する の は 大 
変 で す よ ね 。 ミ ス を する 可能 性 も 高く な り ま す 。 修正 も 面倒 で す 。 

この よ ょ うな 場合 に 、| 配列 ] と いう 機能 を 使用 し ます 。TJavaScript で は 「[ ]] で くく られ た 部 分 が 配列 と な り ま 
す 。 配列 の 中 の デー タ は カン マ 区 切り で 並べ ます 。 デー タ の 種類 は 数 値 で も 文字 列 で も 何で も か まい ませ ん 。 


配列 は 箱 の 中 に 複数 の デー タ を 格納 で きる 


[1.5,.3.6,8,2] [ "tanaka", "suzuki" "kado" "sato"] 






配列 の 宣言 


Var point = [1, 5,。3。6, 8, 2]: 
var names = ["tanaka", "suzuki"。 "kato",。 "sato"]: 
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配列 の 中 の 個々 の 妥 素 に アク セス する と き は 、 変 数 名 の 後ろ に | [先頭 か ら の 順番 ]] を 指定 し ます 。 こ の 
数 値 は 0 か ら 始 まる こと に 注意 し て くだ さい 。 


var a= point[9]」: //a=1 

var b=pointL1]: //b=5 
VarC=Ppoint[2]: //c=3 

var x=names[9]: // x = "tanaka" 
var y=names[1]: // y = "suzuki" 
var z = nameSs[ 2] : // z = “kato" 


配列 に 含ま れ て いる 有 要素 の 個数 は 、| 配列 の 変数 名 length」 と する と 取得 で きま す 。 


配列 の 要素 数 を 取得 


var p=Pponnt.length:  // bp 


var qd=names.length:  // q 


配列 を 使っ て 先ほど の 平均 点 の 例 を 表現 する と 以下 の よう に な り ま す 。 


Var Scores = [59, 79, 37, 99, 67]: 
var average = (Scores[9」] + scores[1] + scores[2] + scores[3] + scores[4]) / scores.1ength: 


沢山 の 変数 を 宣言 し な く て も る 済む よう に な り ま し た 。 た だ 、 これ だ け だ と あり が た み は 感 じ ら れ ませ ん 。 し か し 、 
次 に 説明 する 繰返し 文 と 組み 合わ せる と 配列 は その 威力 を 発揮 し ます 。 





どん な 内 容 で も か まい ませ ん 。 自分 で 配列 を 定義 し て み ま し ょ う 。 
array.html 


Var Sub]ects ー [* 数 学 ”。 / 英 語 " , ? 国 語 " 。 "社会 ", "理科 "]: 
VaFr jikkan ー [" 戻 ", ak ud キリ り 庄 "。 " 甲 " 9 "内 ", ot いっ ce Ao oe と 
VSr ONVS ニ も 31 。 - 26 3.、3W。 31 。 20 。 すもも 31 30、 1 。 0 35 
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( 34.2 | 繰り 返し 一 for 文 ) ーーー 

配列 を 使う と 同じ 種類 の デー タ を 並べ て 管理 で きま す 。 何 の た め に 並べ た の で し ょ うか ? 順番 に 何ら か の 処 う 
理 を する た めで す 。 で な けれ ば 配列 に する 意味 が あり ませ ん 。 こ こ で は for 文 の 定義 と 、 for 文 を 使っ て 配列 の 
素 を 順番 に 処理 する 方 法 を ご 紹介 し まし ょ う 。「 配列] と 「for 文 ] の 組み 合わ せ 、 こ れ は 「 条 件 式 ] と [j 
文 ] の 組み 合わ せ に 優る と も 劣ら な い 、 プ ログ ラミ ング に お ける 最強 タッ グ と いっ て も 過言 で は あり ませ ん 。 あら 
ゆる と ころ で 使用 きれ る テク ニッ ク な の で ぜひ と も る 慣れ る よう に し て くだ さい 。 

for 文 は ある 条件 下 で 処理 を 繰り 返す と き に 使用 し ます 。 英語 の ルー プ (loop) と は 輪 を 意味 し ます が 、 処 
理 を 繰り 返す こと を | ルー プ 」 と 呼び ます 。 


for 文 の 書式 


9 B い 


for (初期 化 式 : ルー プ 継 続 の 条件 式 : カウ ンタ 変数 の 更新 ) { 
症 令 文 e 幸 
) 


for 文 は 以下 の よう な 順序 で 実行 し ます 。 


加 初期 化 式 を 実行 

四 ルー プ 継 続 の 条件 式 が ttue で あれ ば ステ ッ プ 圏 へ 、false で あれ ば for 文 終了 
回 命令 文 の 実行 

El カウ ンタ 変数 の 更新 

回 ステ ッ プ 回 に 戻る 


で 細 ご ( き 可 | ャ -6 | 填 陣 ③ ら 1dIJOSBAP 


for 文 を 使っ て 先ほど の 点数 の 平均 を 求め る 部 分 を 書き 直す と 以下 の よう に な り ま す 。 


var Scores = [59, 79, 37, 99, 67]: 
var total] = 9, average: 


for (var i= の 9 : 1 く scores.length : 1++) { 
tota1 += scores[i]: を 回 
| 


average = tota] / scores.1length: 


ルー プ 1 回 目 は 次 の り よ うに な り ま す 。 


for 文 で カウ ンタ 変数 i を 0 で 初期 化 
四 配列 の length プ ロ パ ティ で 配列 に 含ま れる 個数 を 取得 。scores に は 5 個 デ ー タ が 含ま れ て いる の で 、 
ScoreS.length は 5 と な る 。|i<scores.Iength] は 「0<5| な の で 条件 式 は true、 よ っ て 、 命 令 文 が 実 





EE 命令 文 |total += scores[i]] は 1 が 0 な の で 、「total += scores[0]」 と な る 。 scores の 先頭 の 値 は 
50 な の で 、 変 数 の 値 は |total = 0 + 50 = 50」 と な る 

回 ++ を 実行 する こと で i の 値 が 1 増加 し て 0 から 1 に な る 

還 ステ ッ プ 回 に 戻り 、 条 件 式 の 評価 か ら 処理 が 継続 され る 


ルー プ 2 回目 以 降 の 各 値 は 以下 の よう に な り ま す 。 


ルー プク 2 回 目 以降 の 値 
| 楽 件 式 grP' 但 (eit に 1【 の | 


] ぐ 5 は true total 十 三 SCOres[ 1] で total = 50 士 70 = 1 の 0 
どく ぐ くら 5 は true total オ 三 SCOreS[ ど ] で total = 150 十 37Z= 157 










回 
で うく ぐら 5 は true total オ 三 SCOresS[d] で total ニ 15/ 十 90 = 4/ 
人 4 オ ぐ くら は true total + オ 三 SCOres[4] で tota| ニ ど 4/7 填 6/ ニ 314 
5 ぐ 5 は faglse 癌 令 又 は 実行 され ず 、 for 文 の 次 へ 





1 か ら 指 定 し た 数 まで の 合計 を 求め る 
| 1 か ら N ま で の 数 値 の 合計 を 求め る ペー ジ を 作っ て み ま し ょ う 。 以下 の コメ ント 部 分 に コー ド を 記入 し て 


くだ さい 。 
1-to-N.html 
く html> 
く head> 
く <meta charset="UTF-8"> 
く SCF1Dt> 


function calcSum() て { 
var max = document.getElementById( "max ") . value : 
// < ここ に コー ド を 記述 し て くだ さい > 
document . getElementById( "va1") .textContent = max: 
document . getElementById( "sum") .textContent = tota] : 


J 

く / SCF1Dt> 

く /head> 

く body> 
<h2>1 か ら <span id="va1 "></span> の 合計 は <span id="sum"></span></h2> 
く 1nDut 1d="max” value="19" /> 
<button onclick="ca1cSum( ) "> 合計 </button> 

く /body> 

く /html> 


と 


econesoreeos 





1 か ら 10 の 合計 は 55 
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(3-4-3 | 繰り 返し 一 while 文 ) ーー 


NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNWNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNN キ ポキ NN ポポ ボ ボネ ドド ボネ ネネ ボネ ボド ネネ ボボ ボネ ボド ボド ギ ボド NNNNN 暫 NNNNNNNNNNNNNNNNNNINNNNNNNN キ NNNN さ NNNNMNN さ NN さ ポポ ポポ ネ ポポ ボボ ポポ ボネ ボネ ボボ ポポ ネネ ポポ ネネ ボネ ボネ ボネ ポポ ネネ ポポ ネギ ドド ネネ ネネ ネネ ポポ ネネ キネ ネネ 


while 文 は for 文 と よく 似 て いま す 。 ルー プ 継 続 の 条件 式 が true で ある 間 、 命令 文 の 実行 を 繰り 返し ます 。 う 


while 文 の 書式 - 
while (ルー プ 継 続 の 条件 式 ) { 全 


分 令 文 








前 述 の 演習 の プロ グラ ム を while 文 を 使っ て 書き 直し て みよ う 


while 文 を 使っ て 先ほど の 演習 の 1 か ら N まで の 数 値 の 合計 を 求め る ペー ジ を 書き 直し て み ま し ょ う 。 
1-to-N-while.html 
ちな み に for 文 の 初期 化 式 と し カウ ンタ 更新 を 省略 する と while 文 と まったく 同じ 動き に な り ま す 。 な の で 、 while 
文 は for 文 で 代用 する こと も 可能 で す 。 


以下 は 同じ 
while (ルー プ 継 続 の 条件 式 ) { 


ご 箇 選 区 ( 当 副 | ャ -e | 計 了 ③1dIJOSBAP 


for (: ル ー プ 継続 の 条件 式 :) { 


| 


(34-4 | 繰り 返し 一 continue 文 、 break 文 ) 


NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNN や ポポ ギド ボボ NNNNNNNNNNNWNNNNNNNNNNNNWNNNNNNNNNNWWNNNNNNNNNNNNNNNNNNNNNNNNNNWNNNNNNNNNNNNNNNNNNNNNNNNNNNNN ず NNNNNNNNNN ば NN ポポ ポ ネネ ネギ ネ ボ ネネ ネネ ポポ ボネ ボボ ネネ ボネ ポポ ボネ ポポ ボネ ポ ネネ ネネ ポポ ボボ ボボ ボネ ボネ ボネ ネネ ボボ ネネ ボド ボ ボネ ボボ ネネ ネネ ボボ ネギ ネネ ボネ ボボ ネネ ネネ ボネ ボネ ボネ ボボ ボボ ポ ボネ ポポ ネネ ポポ ポポ ポポ ネネ ネー 


for 文 や while 文 と いっ た ルー プ 処 理 に お いて 、 を その 流れ を 変え る た め の 命令 で す 。 
while 文 の 場合 


while (条件 式 1) { 


if (条件 式 2) { 
continue : // 条件 式 1 へ 


J 


if (条件 式 3) { 
break: // ルー プ を 抜け る 


08/ 


while 文 で continue が 呼ば れる と 、 continue 文 以 降 の 処理 は 実行 きれ る こと な く 〈、 [条件 式 1| の 評価 に 戻 
り 、while 文 の 処理 が 継続 され ます 。 
break 文 が 呼び 出さ れる と 、 ル ー プ の 処理 が 終わ り 、 制 御 が while 文 の 次 に 移動 し ます 。 


for 文 の 場合 


for (初期 化 式 : 条件 式 1,: カウ ンタ 更新 ) { 


if (条件 式 2) { 
continue : // カウ ンタ 更新 へ 
} 


if (条件 式 3) { 
break: // ルー プ を 抜け る 


一 方 、 for 文 の 場合 は 、 continue が 呼ば れる と 、continue 文 以降 の 処理 は 実行 きれ る こと な く 、 カ ウン タ 更 
新 に 処理 が 移動 し 、 を の あと 条件 式 1 の 評価 が 行わ れ 、 for 文 の 処理 が 継続 きれ ます 。break 文 が 呼び 出 き 
れる と 、 ル ー プ の 処理 が 終わ り 、 制御 が for 文 の 次 に 移動 し ほす 。 こ の よう に continue 一 break を 使う と 、 ル ー 
プ 処 理 の 中 で 細か い 制 御 が で きる よう に な り ま す 。 

この ほか に も do 一 while 文 な ど を 使っ て 繰り 返し 処理 の 制御 を 行う こと が で きま す が 、 当面 は に これだけ 覚え て 
いれ ば 十分 で し ょ 2 う 。 


for 文 で 回 文 を 表示 する ペー ジ を つく ろう 


for 文 を 使っ て 回 文 を 表示 する ペー ジ を つく り ま し ょ う 。 文字 列 の 長 さ は 「 文 字 列 変数 .length]」 で 、 
文字 列 の N 番 目 の 文字 は | 文字 列 .charAt(N)」 で 取得 で きま す 。 





kaibun.html 
く !DOCTYPE html> 


く html> 
く head> 
く meta charset="UTF-8"> 
く SCF1Dt> 
function kaibun() { 
// ここ と に コー ド を 記述 し て くだ さい 
} 
く / SCr1Dt> 
く /head> 
く body> 


く 1nDut 1d="Source"/> 
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<button onclick="kaibun() "> 回 文 </button> 
く D 1d="result"> く </D> 
く /body> 
く /html> 


フラ ウザ 表示 例 


しく 
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関数 と は | ある 程度 まとまっ た 負 理 を ひと つの 機能 と し て 抽象 化す る 」 と いう 働き 
を し ます 。 プ ログ ラミ ング の 発展 の 歴史 は 、 抽 象 化 を 進め て きた 歴史 と いっ て も よ 


いで し ょ つう つ 。 関 数 は 最初 の レベ ル の 抽象 化 に あたり ます 。 


(3-5-1 | 開 数 の 定義 ) 

中 学 数 学 で 、 一 次 関数 |「y=ax+b」、 二 次 関数 「y =ax2zTbx+c | と いう よう に 関数 に つい て 学習 し た と 思い 
ます 。 関数 は 変数 x に 値 を 入れ る と y の 値 が 決ま る の で 、「y=f(x)」 と も 表記 され ます 。 こ の よう に 、 関 数 と は 、 
入力 値 を 受け 取っ て 、 何ら か の 処理 を 行い 、 そ の 結果 を 出力 と し て 返す も の で し た 。 プ ログ ラミ ング に お ける 関 
数 も 同じ で す 。 関数 と は 、 引数 と 呼ば れる 入力 値 を 受け 取っ て 、 何 ら か の 処理 を 行い 、 を の 結果 を 戻り 値 と し 
て 返す も の で す 。 


関数 は 引数 を 処理 し て 戻り 値 を 返す 





すっ 9 


JavaScript で は 以下 の よう に function と いう キー ワー ド を 使っ て 関数 を 定義 し ます 。 戻り 値 を 返す と き に は 
return 文 を 使い は す 。 戻り 値 が 不要 な と き は return 文 を 省略 で きま す 。 





関数 の 定義 
function 関数 名 (引数 1, 引数 2, …) { 
何ら か の 処理 
return 戻り 値 : 


関数 は 一 度 定義 し て し まえ ば 、 何 度 で 気軽 に 呼び 出せ ます 。 内 部 構造 や 動作 原理 を 理解 し て いな く て も 
利用 で きる 装置 や 機構 の こと を |「 ブ ラック ボ ックス | と いい ます が 、 関 数 あま さき に ブラ ッ ク ボ ックス と 同じ む で す 。 
間 単 な 例 を 示し まし ょ う 。 ふ た つの 数 値 を 引数 と し て 受け 取り 、 それ ら を 足し た 結果 を 返す 関数 add は 次 の よ 
ラ うに が り ま す 。 


function add(a, b) { 
return a + b: 


var f = add(2, 5): 「 革 - 


に 


関数 を 呼び 出す 場合 は 、 関数 名 の 直後 に 「( 引 数 1, 引数 2.…) 」 と いう よう に 、 カ ッ コ の 中 に 引数 を 指定 し 
ます 。 引数 の 個数 は 自由 に 指定 で きま す が 、 呼 び 出さ れる 側が 意図 し て いる 引数 を 設定 し まし ょ う 。 

た と えば 、 上 の 例 に ある 関数 add は 2 個 の 引数 が 渡さ れる こと を 前 提 と し て いま す 。 し た が っ て 、 呼び 出し 側 
% も 2 個 の 引数 を 指定 し て くだ さい 。 引 数 を 0 個 、 1 個 、 3 個 と 違っ た 個数 で 呼び 出す と 、 正しい 足し 算 の 結果 は 
取得 で きま せん 。 関数 が 正しく 動作 する た め に は 適切 な 引数 が 必要 に な り ま す が 、 適 切な 引数 を 指定 する の 
は 呼び 出し 側 の 責任 で す 。 ち な み に 、 関 数 に よっ て は 引数 が な いも の や 戻り 値 が な いも の も あり ます 。 





摂氏 を 華氏 に 変換 する 関数 を 定義 し て みよ う 


摂氏 (celsius) か ら 華 氏 (fahrenheit) に 変換 する 関数 c2f を 定義 し て くだ さい 。 計算 結果 が 小数 点 
に な る か も し れ ま せん 。「Math.floor( 小数 点 を 含む 任意 の 数 値 ) を 使う と 、 小 数 点 以 下 を 切り 捨て 
た 整数 値 を 得る こと が で きま す 。 
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c2f.html 


く !DOCTYPE html> 
く html> 
く head> 
<meta charset="UTF-8"> 
く SCF1Dt> 
function c2f(c) { 
// ここ に コー ド を 記述 し て くだ さい 


function convert() { 
var c = document . getElementById("celsius") .value: 
Var f = Cc2f(C): 
va 3 杜氏 に ここ キ を で ネス 麻 - 芋 氏 2Y ド そそ 訂 > 
document . getElementById("result”).textContent = Ss: 


091 


092 


く / scr1Dt> 
く /head> 
く body> 
S く input 1d="celsius" type="range" min=" の 9" max="199" 
onchange="convert( ) "/> 
く D 1d="result "></D> 
く /body> 
く /html> 





変 数 が 使え る 男 囲 を 「 ス コー プ 」 と 呼び ます 。 変数 は どこ で 宣言 する か に よっ て 、 使用 で きる 範囲 が 変わ っ て 
きま す 。 関数 の 中 で 宣言 し た 変数 は 関数 の 中 か らし か 使用 で きま せん 。 一 方 、 関数 の 外 で 宣言 し た 変 示 は 、 ど 
こ か ら で $ 使 用 する こと が で きま す 。 こ の よう な 変数 を [広域 変数 ] 6 しく は 「 グ ロー バル 変数 | と 呼び ます 。 


変数 の スコ ー プ SCODe.html 
く SCF1Dt> 
Var Score = 9, timer: 
function keydown(e) { 
Var Code = e.keyCode: 
1† (code == 34) { 
「/ 







) を keydown の スコ ー プ 


SCOre += 10909・ 
多い を 







を グロ ー バ ルス コー プ 
function tick() { 
Var now = new Date( ) : 
1f (score > 1999) { 
clearInterva1(timer): | tiCck の スコ ー プ 





く / SCr1Dt> 


変数 Score と timer は 関数 の 外 で 宣言 きれ て いま す 。 つ まり 広域 変数 で す 。 よ っ て 、 ど こ か ら で 参 照 す る こと 
が で きま す 。 上 の 例 で も 、keydown の 中 で score を 、tick の 中 で score と timer を 参照 し て いま す 。 一 方 、 変 
婦 Code は keydown の 中 で 宣言 きれ て いる の で 、 関 数 keydown の 中 で し か 使う こと が で きま せん 。 同様 に 、 
now は tick の 中 で し か 使え ませ ん 。 

広域 変数 は どこ か ら で も 使え る の で 便利 な の で す が 、 プ ログ ラム の 規模 が 大 きく な っ て くる と 、 どこ で 何 が 行わ 
れる の か 把握 する の が 困難 に な っ て し まい ます 。 広域 変数 の 使用 は で きる だ け 控 え 、 主 な 作業 は ロー カル 変数 
で すま せる の が 堅 生 な プロ グラ ム を 作成 する コツ の ひと つ で す 。 


O さく am ぶさ ヽ ヽ mm さ KK ヽ ヽ 
3- 人 6 」 プロ グラ ム の バグ を と る 作業 デバ ッ グ 
予想 し た と お り に プロ グラ ム が 動け ば よい の で す が 、 現実 は それ ほど 甘く あり ませ 
ん 。 一 般 的 に 、 デ バッ グ と は 問題 を 特定 し て 修正 する 作業 を 意味 し ます が 、 他 人 の 
書い た コー ド を 理解 する 場合 に ちと て も 有用 な スキ ル と な り ま す 。 


( 3-6-1 | ブラ ウザ の デバ ッ ガー ) 

「 デバ ッ グ 」 と は プロ グラ ム の 不具 合 を 特定 し て 、 そ を の 間 題 を 修正 する こと で す 。 デ バッ グ を する た め の ツ ー 
ル を 「 デ バッ ガー」| と 呼び ます 。 最初 に 書い た プロ グラ ム が その まま 問題 な く 動 作 す る と いう こと は まず あり ませ 
ん 。 開発 を し て いる と ほ ば 例外 な く デ バッ グ と いう プロ セス が 必要 に な り ま す 。 デ バッ ガー を 使う と プロ グラ ム を 1 
行 ずつ 実行 で きる の で 、 不 具合 の 特定 は も ちろ ん 、 プロ グラ ム の 動作 理解 に 6 も と て も 役に立ち ます 。 デ バッ ガー 
を 制す る も の は プロ グラ ミン グ を 制す る と いっ て も 過言 で は あり ませ ん 。 その くら い デ バッ ガー の 習得 は 重要 な ス 
キル で す 。 ぜひ 、 こ の 機会 に デバ ッ ガ ー に 慣れ る よう に し て くだ さい 。 

最近 の ブラ ウザ に は 開発 ツー ル が つい て お り 、 その な か か ら デ バッ ガー を 起動 する 2 こと が で きま す 。 ブ ラウ ザ 
の バー ジョ ン ア ッ プ サイ クル は 早い た め 、 本 書 の 画面 と 実際 の 様子 は 異な る か も し れ ま せん 。 し か し 、 デバ ッ グ 
の 基本 的 な 操作 手順 は 変わ り ま せん 。 以下 は 多く の ブラ ウザ に 備わっ て いる 主 な デバ ッ グ 機能 で す 。 


・ ブレ ー ク ポイ ント の 設定 ・ 解 除 
プロ グラ ム を 一 時 停止 きせ る 場所 を |「 ブ レー ク ポ イン ト 」 と 呼び ます 。 を その 場所 を 設定 し た り 、 解除 し た 
りす る 機能 で す 。 

。 ステ ッ プ 実行 
1 行 ず つ 実 行 し て いく 機能 で す 。 
ステ ッ プ イン : 次 の 行 を 実行 し ます 。 次 の 行 が 関数 の 場合 、 そ の 関数 の 最初 の 行 へ 制御 を 移し ます 。 
ステ ッ プ オー バー : 次 の 行 を 実行 し ます 。 次 の 行 が 関数 の 場合 、 を の 関数 を 実行 し た あと で 、 関 数 の 


外 で 止ま り ま す 。 
ステ ッ プ アウ ト : 現在 の 関数 を 最後 まで 実行 し 、 呼 び 出し 元 の 関数 に 戻り ます 。 
・ 変数 の 確認 


変数 に どん な 値 が 格納 され て いる か 確認 する 機能 で す 。 広域 変数 と ロー カル 変数 を 整理 し て 表示 し た 
り 、 自 分 で 変数 を 指定 し た りす る こと が で きま す 。「 ウ ォ ッ チ 」 機能 と も 呼ば れ ま す 。 

・ コー ルス タッ ク の 確認 
ある 関数 A が 関数 B を 呼び 出し 、 関数 B が 関数 C を 呼び 出し 、 と 関数 呼び 出し が どん どん 深く な っ て い 
〈 こ と が あり ます 。 る を の 関数 呼び 出し の 履歴 を コー ルス タッ ク と 呼び ます 。「 呼 び 出 し 履歴 | と 翻訳 され 
て いる か も し れ ま せん 。 


例 と し て 、P.091 の 演習 で と りあ げた 、 摂 氏 か ら 6 華氏 に 変換 する ペー ジ で デバ ッ ガ ー を 使っ て み ま し ょ 2 う 。 
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摂氏 か ら 華 氏 に 変換 (P.091) C2f.html 


く !DOCTYPE html> 


く html > 
く head> 
く meta charset="UTF-8"> 
く SCF1Dt> 
function c2f(c) { 
var†f= (9 /5) *c+ 32: 
return Math.floor(f): 
J 
function convert() て { 
var c = document.getElementById("celsius") . value : 
Var f = Cc2f(C): 
var s= "摂氏 :"+c+" 度 華氏 :"+f+" 度 ": 
document. getElementById("resu1t").textContent = s: 
J 
く /SCr1Dt> 
く /head> 
く body> 
く 1nput 1d="celsius” type="range” min=" の 9" max="199" onchange="convert( ) "/> 
く D 1d="FeSult"> く /D> 
く /body> 
く /html> 


| 3:a 旧 40【g:】 直 2 られ) 


ペー ジ を 表示 中 に F12 キ ー を 押下 する と デバ ッ グ ツー ル が 起動 し ほす 。「 デ バッ ガー」 タブ を 選び 、 convert 
関数 1 行 目 の 行 番号 の 左 の 領域 を クリ ッ ク 、 も し く は F9 キー を 押下 し て 、 関数 に ブレ ー ク ポイ ント を 設定 し ます 
(次 ペー ジ 図 参照 )。 正しく 設 定 さ れる と 赤い 丸 が 表示 され ます 。 そ の 状態 で ペー ジ 上 の スラ イダ バー を 操作 
する と 関数 が 呼び 出さ きれ 、 ブ レー ク ポ イン ト で 実行 が 一 時 停止 し ます 。 





Internet Explorer の デバ ッ ガ ー 


ファ イル 内 の 検索 (C 





} < !DOCLTYPE h れ て mm ス 、 ね ーー 


2 < く h て 血 1 > 
mW ^lLocai 


く head> 

A <script> b gthis lobject Windowl 

5 function c2f(c) ( P @ arguments lobjet (Arguments] 

5 Varf= (9/5) * <c + 32: | まま undefined 

return Path .f1oor(f) : 8 縮 { undefined 

S } | ま undefined 

ン 回 旗 [Globalsi 
19 function convert( ) ( om ォ ッ チ 式 の 追 } 

乾 1 er c = document-getE1ementById("cesios*).vaue: er 

12 var f = <2f(c): 請 呼び 出し 届 歴 ブレ ー ク ボイン ト 

var 5 = "持氏:" ィ c<* 度 華氏 :“+ ゃ +" 度 ": 3 ー 
1 document . getE1ementById("resu1t") -textContent = s: 男 <= ーー 
1 ) 加 。 メ イン フレ ー ム 
16 </script> 尋 conver c2fhtmi (1.。 
17 </head> onchange c2f.html (1.- 
18 く body> 

1 く 1nput 1d=" て Ce1sius" tyD で ="range" min=“"9" max=“"196" onchange 
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現在 実行 が 停止 きれ て いる 行 が 黄色 で ハイ ライ ト し て 表示 され ます 。 画面 有 の ウォ ッ チ ウイ ンド ウ で 、 ロー カ 
ル 変 数 や 広域 変数 、 を の ほか 任意 の 変数 の 値 を 見 る こと が で きま す 。 

ここ で ツー ルケ バー に ある 3 つの ボタ ン を 使っ て 処理 を 進め て いき ます 。 ブ プラ ウザ の バー ジョ ン に よっ て アイ コン 
が 異な り ま す が 、 ど こ か に この 3 つの 機能 を も 6 もつ ボ タン が ある は ず で す 。 


プレ ー ク ポイ ント 、 ス テッ プ 実 行 ボ タン 、 変 数 の 値 の 表示 


ステ ッ プ オー バー (F10) 
ステ ッ プ イン (F11) 


ステ ッ プ アウ ト (Shift+F11) 
※ キ ー 表 記 は Internet Explorer の も の 


目 号 時 






+ Xs 
69 ニー 


b 較 this [object Window] 

b ゆ arguments [object (Arguments)] 
細 て undefined 
連 f undefined 
| ま : undefined 

b [Globalsi 

ウォ ッ チ 式 の 追加 


function conver て ( ) て { 


Var f = c2fT( て ): 
var s = “摂氏 :“" す c+" 度 華氏 :“+ イ +" 度 ": 
doCument . getE1emdntByTd( "resu1 て " ) .textContent = s: 





ここ を クリ ッ ク 実行 が 停止 され て いる 行 画面 右側 の ウォ ッ チ ウイ ンド ウ で は 変数 
ブレ ー ク ポイ ント が 設定 され る ( 図 は ブレ ー ク ポイ ント で 実行 が 一 時 停止 し た と ころ ) の 値 を 見 る こと が で きる 


上 記 の 状態 で ステ ッ プ イン アイ コン 5。 を クリ ッ ク (も る もしくは F11 を 押下 ) する と 、 以 下 の よ うに |var f = 
c2f(c): | の 行 に フォ ー カ ス が 移動 し ます 。 


ステ ッ プ イン 1 
function convert( ) 
var C = document.getElementByTd( "ce1sius" ) . value : 
lr ィ ・ cefo 
var s = “摂氏 :" ど +c+" 度 華氏 :“"+f +“ 度 “: 
document . getE1ementByTd( "resu1t" ) .textContent = s: 





この あと 、 さ ら に ステ ッ プ イン 5。 を 実行 する と 、 次 の よう に な り ま す 。 


ステ ッ プ イン 2 
function c2f(c) { 
arf<975)*c+32: 
return Math .f1oor(†f ) : 
ょ 


function convert( ) { 


var C = document .getE1ementByTd( "ce1sius" ) .Va1ue : 
Var f = C2T(C) >: 

var S=" 扱 氏 :" ど + ャ c+" 度 芋 氏 :“ ど ++“" 度 ": 
document . getE1emmentByTd( "resu1 て " ) .textConten = Ss: 





c2f 関 数 の 中 に 制御 が 移動 し て いる こと が わか り ま す 。 を その 後 、 ス テッ プア ウト eE。 、 ス テッ プ オ ー バ ー と 実行 
する と 以下 の よう に な り ま す 。 
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ステ ッ プ アウ ト 、 ス テッ プ オ ー バ ー 


function convert( ) 
var c = document-.getE1ementByTd("ce1sius") .value 
Var 了 = c2f( て )> 
ar 5 =-" 拓 氏 :"+c+" 度 


document 。 ーー イー ニテ ーー 一 





コネ Cfoeo74【: 昌 1gelit: ま クル れこ) 


| Google Chrome の 設定 ] 一 「 を その 他 の ツー ル 」 一 「 デ ベロ ッ パ ー ツ ー ル | で 、 デ ベロ ッ パ ー ツ ー ル を 起 
動 し ます 。 


デベ ロッ パー ツー ル を 起動 





cf 
< < Fe:2oyeexossoxoocsot 較 


新しい ウブ (T) Ctr+ 
新しい ウィ ンド ウ (N) Cri+N 


シー クレ ッ ト ウィ ンド ウ を 開く (1) Cri+ Sh 故 +N 


履 右 (H) CT+H 
ダウ ン ロ ー ド (D) Ctrl+.〕 
最近 使っ た タブ 
ブッ クマ ー ク (B) 


拠 大 / 欄 小 


印 征 (P).…. 

名 前 を 付け て ベ ページ を 保存 (A)... 
検索 (F)... ( 
と の 8 開 融 履 屋 を 滑 去 (て )... Cri+ Sh 邊 +Delete 
撤 乱 機 葉 (E) 

タス ク マネ ー ジ ャ (T) Sh 人 t+Esr 
設定 ($) アプ リケーション の ショ ー ト カッ ト を 作成 (S).… 

Googie Chrome に つい て (G) ェ エン コー ド (E) 

ヘル プ (H) 


完全 切り 取り (T) ゴビ ー(C) 


デベ ロッ パー ツー ル (D) 


Windows 8 モー ド で Chrome を 巨 起 動 ゾー ス を 表示 ( 〇 O) 


デベ ロッ パー ツー ル の 表示 状態 は 使用 状況 に よっ て 異な り ま す 。 [Sources」 タブ を 選択 し 、 左側 の 一 覧 か ら 
HTML フ ァイル を 選択 し て ソー スコ ー ド を 表示 し 、 行 番号 を クリッ ク す る こと で ブレ ー ク ポイ ント が 設定 され ます 。 


「Sources」 タブ で ソー スコ ー ド を 表示 し て ブレ ー ク ポイ ント を 設定 


を う で B file: /7/D: /Book/JavaScript/JavaScript/Basic/c2f. html_ 





財 
氏 :57 度 華氏 :134 度 





ーーーーーーーーーーーー ーー function c2f(c) 
よこ ar イイ =(9/5) “ce< 32: 


。 記 <2fhtml_ return Nath.f1oor() 


Async_ 


func て on end { 
= 9 の O て umeTt get て E1ementByTd( “て で 1 5 1us " ) .ya1ue : 
共 氏 : 叢 氏 :“" ゃ +。“ 度 *: | ot Pouseg 
document . gctE1ementByTd(・ 「 で Su て " ) .textContent = s: 
) に Sreakponts 
〈/* て 「 ュ pt て > "| 張 c2fhtmk11 
* 。 var c = document、getElemwent8_ 


| DS | 


関数 の 1 行 目 に ブレ ー ク ポイ ント を 設定 し 、 ペー ジ の スラ イダ バー を 動か し ます 。 現在 止 まっ て いる 人 箇所 が 青 


色 で ハイ ライ ト さ れ ま す 。 


フレ ー ク ボイン ト で 一 時 停止 
四 人 | function convert(){ =00 0 


var f = Cc2f(c) >: 


var Ss=“ 扱 氏 :"+c+" 度 華氏 :“"+f+" 度 ": 
document . getE1ementByTd( "resu1] て " ) .textContent = 





上 記 の 状態 で ステ ッ プ オー バー アイ コン ふ へ を クリ ッ ク (も し く は F10 を 押下 ) する と 、 以 下 の よ うに 「var f = 


c2f(c)) | の 行 に フォ ー カ ス が 移動 し ます 。 


ステ ッ プ 実行 ボタ ン 
ステ ッ プ イン (F11) 
ステ ッ プ オー バー (F10) ステ ッ プ アウ ト (Shift+F11) 





document . Re ). EEEE 





続け て 、 ス テッ プイ ン き を 実行 する と 、 次 の よう に な り ま す 。 


ステ ッ プ イン 
function c2f(c) {( emN29IN 0 0 0 2 スス 


return Math . 和 1oor(f ) : 


Tunct て 1ion convert() て 
Va C = document . ge て E]1ementByTd( "ce1sius " ) .va1ue : 
var 人 f = C2f(c)>: 
var sS=" 扱 氏 :"+c+" 度 華氏 :"+f+" 度 ": 
document . getE1ementByTd( "resu1 て " ) .text て Content = 

} 





c2f 関数 の 中 に 制御 が 移動 し て いる こと が わか り ま す 。 その後 、 ス テッ プア ウト s 、 


行 す る と 以下 の よう に な り ま す 。 


Va「 C = document .getE1ementByTd( “ce1sius").value: で 
var 千 = c2f(c): 在 = 84 


var s = “" 扶 氏 :“"+c ェ +" 度 





ステ ッ プ オー バー 詩 と 実 
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デバ ッ ガ ー を 使っ て みよ う 


今 ま で 入力 し た プロ グラ ム で デバ ッ ガ ー を 使っ て み ま し ょ う 。 いろ いろ な 場所 に ブレ ー ク ポイ ント を 設定 
し 、 ス テッ プイ ン 、 ス テッ プア ウト 、 ス テッ プ オ ー バ ー で どの よう に 動く か 確認 し て くだ さい 。 そ の 際 に 変 
数 の 値 (ロー カル 変数 、 広 域 変数 ) が どう な る か 、 コ ー ル スタ ッ ク (呼び 出し 履歴 ) が どう な っ て いる 
か も 合わ せ て 確認 し て くだ さい 。 





動か な いと き は 


正しく 入力 し た は ず な の に 動か な い …… お そら く 〈 く 多く の 人 は その よう な 状況 に 章 遇 する こと で し ょ う 。 詳し い 人 
に 聞く の も る よい で す が 、 それ は 最後 の 手段 と し て 取っ て お きま し ょ う 。 試行 錯誤 する 過程 で 多く の こと を 学ぶ こと が 
で きる か ら で す 。 ま ず は 目 分 で ある 程度 解決 する 努力 を する こと が 大 切 で す 。 


何 度 も 見 な お す 

当然 の こと で す が 、 自分 の 書い た コー ド と 本 に 掲載 きれ て いる コー ド を 丁寧 に 見 比べ て くだ さい 。 き っ と ど 
こ か に 間違い が ある は ず で す 。 

デバ ッ グ を する 

開発 者 ツー ル を 使っ て 、 どこ に 問題 が ある か 調べ て み ま し ょ う 。 コ ン ソ ー ル に 何ら か の エラ ー が 表示 され 
て いる 可能 性 も 高い の で 、 それ に も 注意 し ます 。 い ろ い ろ な と ころ に ブレ ー ク ポイ ント を 設定 し 、 どこ で 何 が 
起き て いる の か 把握 する こと は 非常 に 良い 勉強 に な る は ず で す 。 

バク を 確実 に 再現 する 手順 を 見 つけ る 

何ら か の きっ か け で 動作 が お か し く な る こと も ある で し ょ う 。 そん な と き は その 不具 合 を 確実 に 再現 で きる 手 
順 を みつ ける と バグ の 特定 が 早く な り ま す 。 そ の 手順 に 該当 する 箇所 に ブレ ー ク ポイ ント を 設定 し 、 何 が 
起き て いる か 理解 し な が ら 実 行 し て いく と よい で し ょ う 。 

コン ソー ル に 情報 を 出力 し て みる 

タイ ミン グ の 間 題 で バッ ガー を 使う と バグ が 再現 し な いと いう こと も ある で し ょ う 。 その よう な 場合 は 、 
console.log() を 使っ て 各種 情報 と を コンソール に 出力 し 、 何 が 起き て いる か 調べ て み ま し ょ う 。 
ほか の ブラ ウザ 、OS で 試し て みる 

HTML5 で 標準 化 が 進ん だ と は いえ 、 まだ まだ ブラ ウザ や OS に よっ て 挙動 が 異な る 場合 が あり ます 。 特 
に 新しい 機能 で は 挙動 が 異な る こと が 少な く (あり ませ ん 。 も し か する と あな た の プロ グラ ム で は な く 、 ブ ラ 
ウザ の 欠 動 の 違い が 原因 な の か も し れ ま せん 。 行き 詰まっ た と き は ほか の 環境 で 試し て み ま し ょ う 。 


よく ある ミス を 以下 に 挙げ まし ょ う 。 


スペ ル が 違う 
実際 に は 一 番 多 い ケ ー ス の ひと つ で す 。 以下 は 実際 に あっ た ケー ス で す 。 何 が 間 題 か すでに わか り ま す 
か か? 


ver a= 3: // NG 
var a=3: // OK 
document . getElementById("info").textContent = "hello": // OK 
document . getElementByid("info").textContent = "hello": // NG 


よ 〈《 見 る と var が ver に な っ て いる 、 Id の | が 小文字 に な っ て いる 、 と いう 間違い が ある こと が わか り ま す 。 
| この くら い の ミ ス は 見 逃し て くれ よ 」 と 思わ れる か も し れ ま せん が 、 コ ンピュータ は どん な 紫 細 な ミス も 許し 
て くれ な い の で ご 注意 くだ さい 。 


・ カッ コ の 対応 が と れ て いな い 
これ も よく ある ケー ス で す 。 デ バッ ガー で ブレ ー ク ポイ ント を 設定 で き な い 場合 、 これが 原因 の こと が ほとん 
ど で す 。 カッ コ の 対応 に 応じ て きち ん と ソー スコ ー ド の 体裁 を 整え て くれ る 統合 開発 環境 を 使う こと で 、 こ 
の ミス を 激減 する こと が で きま す 。 以下 は 調 っ た 例 で す 。 


function init() { 
for (var 1 = の 9 : 1 すぐ く 1 の 9 : 134+) て 
document . getElementById(”1d"+ ュ ) .textContent = " リ : 


関数 が 定義 きれ て いる よう に 見 えま す が 、 こ れ は 関数 と し て 不正 で す 。 なぜなら カッ コ の 対応 が と れ て い 
な いか ら で す 。 


function init()|( | を これ に 対応 する か っ こ 「}」 が な い 
fOP 《VaAF 1 この 9: すぐ 19 : 31 す *) て 
document .getElementById(”1d"+i ) . textContent = "": 


・ 全角 文字 を 使っ て いる 

非常 に 見 つけ に くい バグ で す 。 セミ コロ ン が 半角 の 「:] で は な く 、 日 本 語 の 「:」 だ っ た り 、 全角 スペ ー 
ス が 紛れ て いた こと も あり まし た 。 こ の 手 の バ グ は 目視 ば け で は 見 つけ る こと が 困難 で す 。 ブ ラウ ザ の デ 
バッ ガー を 使っ て 不具 合 の 箇所 を 特定 する 必要 が あり ます 。 

頭 を 挿 き むし りな が ら | な ぜ 動 か な いん だ ! と イラ イラ する こと も ある で し ょ う 5。「PC が 悪い に ちがい な い | 
と 思う こと も ある で し ょ う 。「 何 で こん な バカ な ミス を し て 半日 る 浪費 し て し まっ た ん だ | と 落胆 する こと も ある 
で し ょ う 。 みん な を その よう な プロ セス を 経て 学習 を し て いく の で す 。 試行 錯誤 し た 分 だ け 報 われ る の で 頑 
張っ て くだ さい 。 
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オフ ジェ クト 


日 使わ れる 言語 の ほとん ご は オブ ジェ クト 指向 と いう 概念 を サポ ー ト し て いま す 。 
プロ グラ ミン グ 学 習 を 進め る うえ で 、 オ ブ ジ ェクト に 慣れ る こと は 大 き な 壁 の ひと つ 
で す 。 最 初 は と っ つつき に くい か も し れ ま せん が 、 何 度 も 繰り 返し て 慣れ る よう 頑張 っ 
て くだ さい 。 


(371 | オブ ジェ クト と は ) 


辞書 で 1「 オ ブ ジ ェクト | を 調べ る と 「 物 、 物 体 、 目的 ] な ど と 説明 きれ て いま す 。 実は 身の回り の 「 物 ] は 
すべ て オブ ジェ クト な の で す 。 物 に 共通 する 特徴 を 捉え 、 そ れ を プロ グラ ム で 表現 する こと で 問題 の 解決 を 図 
ろう と する の が オブ ジェ クト 指向 プロ グラ ミン グ の 考え 方 で す 。 

ビン と こない で す よ ね ? | オブ ジェ クト 」| は 、 数 字 や 文字 の よう に わか りや すい 概念 で は な い の で 、 最初 は と っ 
つき 難い と 思い ます 。 た だ 、 プ ログ ラミ ング を する うえ で オブ ジェ クト を 避け て 通 ろ こと は で きま せん 。 以降 の 説 
明 を 何 度 も 読み 返し 、 慣 れる よう に 頑張 っ て くだ さい | 


シス ルール 『 ム と ジル 4 Ez レル た モレ 





オブ ジェ クト 指向 プロ グラ ミン グ の 学習 を 始め る 前 に 、 特 に 重要 な 概念 に つい て 最初 に 説明 し て お きま す 。 


オプ ジェ タ ト 

| 6 も 5 の]」 で す 。 あ な た が 見 る も の 、 触 る ある も の 、 す べ て が オブ ジェ クト で す 。 ゲー ム に お ける 自分 、 敵 、 仲 
間 、 弾 丸 … こ れ ら も オブ ジェ クト と 考え る こと が で きま す 。 

プロ パテ ィ 

家 の 中 を 見 向 し て み ま し ょ う 。 掃除 機 、 炊飯 器 、 テ レビ 、 照 明 、 コ タツ 、 ドラ イヤ ー い ろ い ろ な 家電 製品 
が あり ます が 、 これ ら も 当然 オブ ジェ クト で す 。 で は 、 な ぜ 掃 除 機 と 炊飯 器 を 区 別 で きる の で し ょ うか ? そ 
れ は 挿 除 機 に は 掃除 機 の 、 炊飯 器 に は 炊飯 器 の 特徴 が ある か ら で す 。 色 、 大 きき 、 重 き 、 機 能 と いっ 
だ オブ ジェ クト の 個々 の 特徴 を | プロパティ] と 呼び ます 。 

メゾ ッ ド 

オブ ジェ クト は 何ら か の 方 法 で 操作 で きま す 。 テ レビ な ら 電 源 を 入れ て 、 チ ャ ン ネ ル を 変え て 、 音 量 を 
調節 し て 、 と いう 具合 で す 。 車 な ら 、 エ ンジ ン を か け て 、 ア クセ ル を 踏ん で 、 ブ レー キ を 踏ん で 、 と 操作 
する で し ょ う 。 こ の よう に オブ ジェ クト に 対し て 働き か ける 個々 の 操作 を | メソ ッ ド 」 と 呼び ます 。 

イン タフ ェ ー ス 

新しく テレ ビ を 買っ た と し ます 。 ど の メー カー の テレ ビ で も 説明 書 を 読ま な く て も 使え る の は 、 テ レビ の 使い 
方 を 知っ て いる か ら で す 。 新しい 車 を 買っ た と し まし ょ う 。 ど の メー カー の 車 で も 直ぐ に 運転 で きる の は 、 車 
の 運転 方 法 を 知っ て いる か ら で す 。 テ レビ の 操作 、 車 の 運転 と いっ た 操作 に は 共通 点 が あり ます 。 ア ク 


セル と ブレ ー キ の 位置 が 車 に よっ て 違う と いう こと は あり ませ ん 。 こ の 意味 の ある 操作 方 法 の まとまり の こと 
を |「 イ ンタ フェ ー ス 」 と 呼び ます 。 テ レビ の イン タフ ェ ー ス に は 、 電 源 の オン オフ 、 音量 の アッ プン ダ 
ウン と いう 操作 が あり 、 車 の イン タフ ェ ー ス に は エン ジン の オン オフ 、 ブ レー キ 、 ア クセ ル 、 ハ ンド ル 
操作 ほ と い っ た も の が あり ます 。 前 述 し た よう に 個々 の 操作 の こと を 「 メ ソ ッ ド 」 と 呼び ます が 、 意味 の ある 
メソ ッ ド の 集合 が |「 インタフェース | と な り ま す 。 
・ カプ セル 化 

私 た ち が テ レビ の チャ ン ネ ル を 変え る と 、 テ レビ の 中 で は 、 受 信 周 波数 を 変え る 、 パ ケッ ト を 取り 出す 、 
画像 を デコ ー ド する 、 と いう よう に 、 非常 に 複雑 な 処理 が 行わ れ ま す 。 車 6、 ア クセ ル を 踏 むと 、 ガ ソリ ン 
が エン ジン に 送ら れ 燃 焼 系 で ピス トン が 動い て と 、 こち ら も 大 変 な 作業 が 行わ れ ま す 。 し か し 、 ユー ザー 
の 立場 か ら す る と 、 この よう に テレ ビ や 車 の 中 で 起き て いる こと を 意識 する 必要 は あり ませ ん 。 こ の よう に 中 
で 起き て いる こと を 隠す こと を 「 カ プ セ ル 化 」 と 呼び ます 。 


回 回 四 還 





ここ まで の 説明 を まとめ て みる と 以下 の よう な 図 に な り ま す 。 


プロ パテ ィ 、 メ ソ ッ ド 、 イ ンタ フェ ー ス 


メソ ッ ド メソ ッ ド 
・ ア クセ ル を 踏む ・ 電 源 オ ン オ フ 
・ ブ レー キ を 踏む 》 車 イ ンタ ー フ ェ ー ス ・ チ ャ ン ネ ル 変 更 〉 TV イン ター フェ ー ス 
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・ ウ イン カー を 出す ・ 音量 調節 


車 プ ロ パ ティ TV プロ パテ ィ 


・ 色 色 
・ 重 さ 重 さ 





例 が 日 常 的 過ぎ て 、 プ ログ ラム の 話 と は うま くむ す び つか な か っ た か も し れ ま せん 。 し か し 、 これ ら の 概念 は オ 
ブ ジェ クト 指向 プロ グラ ミン グ で 非常 に 大 切 で す 。 

Java や C# と いっ た 言語 で は 言語 仕様 も し し て イン タフ ェ ー ス が サポ ー ト され て いま す 。 一 方 、 ]avaScript に は 
イン タフ ェ ー ス と いう 機能 は 用 意 き れ て いま せん 。 プ ログ ラミ ング 学習 を 進め る う ぇ で 把握 し て ほし い 概 念 だ っ た 
の で ここ で 説明 し まし た 。 ご 丁 承 くだ さい 。 





身の回り の も の か ら 、 オ ブ ジ ェクト 、 プ ロバ ティ 、 メ ソ ッ ド を 考え て みよ う 
身の回り か ら 適 当 に オブ ジェ クト を 選び 、 そ の オブ ジェ クト に は どの よう な プロ パテ ィ が あり 、 ど ん な メソ ッ 
ド が ある か 考え て み ま し ょ う 。 ま た 、 そ の オブ ジェ クト の イン タフ ェ ー ス は どの よう な も の で し ょ うか ? 


で は 、 実際 の プロ グラ ム で 、 オ ブ ジ ェクト 指向 的 な 考え 方 が どの よう に 利用 きれ る の か を 見 て み ま し ょ う 。 
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(3.7-2 | JavaScript で の オブ ジェ クト の 定義 方 法 ) 


JavaScript で の オブ ジェ クト の 定義 は 簡単 で す 。 単に |「}| | の 間 に プ ロ パ ティ を 宣言 する だ け で す 。 


ウル チイ ンク か れ か :: 





JavaScript で は 渡 括 殆 11 日 で オブ ジェ クト を 定義 し まほ ます 。 た と えば 空 の オブ ジェ クト は 以下 の よう に 宣言 し 
まま 。 


Var empty = {}: 


空 の オブ ジェ クト で は お も し ろく あり ませ ん ね 。 も る もう少し 具体 的 な 6 の を オブ ジェ クト で 表現 し て み ま し ょ う 。 長き 
5cm の 赤 の 色鉛筆 が あっ た と し ます 。 プロ パテ ィ と し て は 、 色 と 長 きる が 考え られ ます 。 本 avaScript で は 以下 の よう 
に 定義 し ます 。 


Var pen ={ 
color: "red", 
length: 5 


文法 的 に は 以下 の よう に 、 波 括弧 の 中 に |「 プ ロ パ ティ 名 : プ ロ パ ティ 値 」 と 記述 する こと で プロ パテ ィ を 宣言 し 
ます 。 複数 ある 場合 は カン マ で 区 切り ます 。 


オフ ジェ クト の 定義 


オブ ジェ クト = {プロ パテ ィ 名 1: プロ パテ ィ 値 1, プロ パテ ィ 名 2: プロ パテ ィ 値 2,…) 


日 色 で 時 速 30km の 車 を 定義 し て み ま し ょ う 。 その 一 例 を 以下 に 示し ます 。 燃料 が な い 自 動車 は な い の で 
fuel プロパ ティ も 追加 し て み ま し た 。 


var car ={ 
color: "white", 
SDeed: 39, 
fuel: 199 





オブ ジェ クト を JavaScript で 表現 し て みよ う 
直前 の 演習 で 考え た オブ ジェ クト を JavaScript で 表現 し て み ま し ょ う 。 


オブ ジェ クト の プロ パテ ィ に アク セス する に は 、 オ ブ ジ ェクト の 後ろ に |.|」 ドッ ト を 付け 、 を の 後ろ に プロ パテ ィ 
名 を 記述 し ます 。 


オブ ジェ クト の プロ パテ ィ に アク セス 


オプ ブ ジェクト. プロ パテ ィ 名 


pen オブジェ クト の length プロ パテ ィ を 参照 する サン プル を 以下 に 示し ます 。 
object-pen1.html 


く !DOCTYPE html> 
く html> 
く head> 
<meta charset="UTF-8"> 
く SCF1Dt> 
var Den ={ 
color: "Fed", 
length: 5 
J 
function checkLength() { 
document . getElementById("1ength") .textContent = pen.length: 
け 
く / SCr1Dt> 
く /head> 
く body> 
<button onc1ick="checkLength() "> 長 さ チェ エック </button> 
<p> 鉛 筆 の 長 さ は <span id="1ength"></span>cm</p> 
く /body> 
く /html> 


送 に 、pen オブ ジェ クト の length プロ パテ ィ に 値 を 代 人 人 する に は 以下 の よう に し ます 。 
pen.length = 3: 


オブ ジェ クト の プロ パテ ィ と いう と 難し く 聞 こえ る か も し れ ま せん が 、 単 な る 変数 と 同じ よう に 扱う こと が で きま す 。 
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car オ ブ ジ ェクト の プロ パテ ィ を ペー ジ に 表示 し て みよ う 
car オブ ジェ クト の スピ ー ド と ガソリン の 量 を 表示 する ペー ジ を 作っ て くだ さい 。 
Object-car1.html 


4 め 必 4 か 





色 佑 革 は 書く こと が で きま す 。 自動 車 は 加速 ・ 減 速 ・ 運 転 す る こと が で きま す 。 それ ら を メソ ッ ド と し て 定義 し 
て み ま し ょ う 。 寺 ず は 色鉛筆 で す 。「 書 く | と いう 操作 を draw メソ ッ ド と し て 定義 し て み ま し ょ う 。 色鉛筆 は 描く と 
短く な る と ころ が ポイ ント で す 。 


Var Den = { 
color: "red", 
length: 5, 
draw: function () { 
this.1ength -= 9.91: 


メソ ッ ド の 富 言 方 法 は color や length と 上 いっ た プロ パテ ィ 値 と 同じ で す 。 た だ し 、 プ ロ パ ティ 値 に 関数 を 指定 
する 点 が 異な り ま す 。 実は JavaScript の オブ ジェ クト で は メソ ッ ド も プロ パテ ィ る も 同じ よう に 扱い ます 。 メソ ッ ド と い 
うと 難し そう に 聞こ えま す が 、 値 が 関数 の プロ パテ ィ を メソ ッ ド と 呼ん で いる だ け な の で す 。 

と ころ で 、draw メソ ッ ド の 中 に 「this] と いう キー ワー ド が あり ます 。 こ の this は オブ ジェ クト 自身 を 示す と て も 
重要 な キー ワー ド で す 。 世 の 中 に は た くさ ん の 色鉛筆 が あり ます が 、 この this は 今 自分 が 手 に 持っ て いる 色 倍 
て 、 this.length は | 目 分 が 手 に 持っ て いる 色鉛筆 の 長き | を 参照 する こと に な り ま す 。draw メソ ッ ド で は 書く 度 
に 藤 る を 0.01cm 短 《 し て いま す 。 ほ か の 鉛筆 の 長き を 短く (し て いる の で は な く 〈 く 、 自分 自身 の 長き を 短く し て いる こ 
と に 注意 し て くだ さい 。 

らち なみ に 、0.01 を 繰り 返し 引い て いく 〈 と まる め 誤 差 が 発生 し て 4.8800000003cm の よう な 値 に な る こと が あり ま 
す 。 こ れ は 2 進数 で 正確 に 小数 を 表現 で き な い こと が ある た めで す 。 

朋 の 例 に draw メソ ッ ド を 追加 し た 例 を 以下 に 示し ます 。 


Object-pen2.html 


く !DOCTYPE html> 
く html> 
く head> 
く <meta charset="UTF-8"> 
く SCT1Dt> 
var pen = { 
DLOFP: "Fed 。 
length: 5, 
draw: function () { 
this.length -= 9.091: 


J 
function stroke() { 
Den .draw( ) : 
document. getElementById("1ength") .textContent = pen.1ength: 
J 
く / SCr1Dt> 
く /head> 
く body> 
<button onc1ick="stroke() "> 書く </button> 
<p> 鉛 筆 の 長 さ は <span id="1ength"></span>cm</p> 
く /body> 
く / html> 


フラ ウザ 表示 例 


# 筆 の 長 さ は 4.93cm 





| 書く] ボタ ン が 押さ れる と | pen.draw()」 と いう 5 行 が 実行 きれ ます 。 オ ブ ジ ェクト の プロ パテ ィ 参 照 は 「 オ ブ 
ジェ クト . プロ パテ ィ 名 」 で し た 。 オ ブ ジ ェクト の メソ ッ ド 呼び 出し は 「 オ ブ ジ ェクト . メソ ッ ド 名 ()」 と な り ま す 。 プ 
ロ パ ティ の 値 が 関数 な の で 、 カ ッ コ を つけ る こと で を その 関数 を 実行 し て いる の で す 。 draw メソ ッ ド の 中 で は 、 自 
分 の 長 る を this.length で 参照 し 、 そ の 長き る を 0.01cm 短く し て いま す 。 

ちな み に 、 メ ソ ッ ド に は 引数 を 渡す こと も で きま す 。 た と えば 、 描 画す る 長き を 引数 で わた し 、 そ れ に 合わ せ て 
鉛筆 の 長 る を 短く する 場合 は 、 


draw: function (d) { 
this.1ength -= 9.91 x* d: 
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の よう に 、 メ ソ ッ ド の 関数 に 引数 を 宣言 し 、 を の 引数 を メソ ッ ド の 中 で 使用 し ます 。 
呼び 出し 側 は |pen.draw(5):」 の よう に メソ ッ ド 呼び 出し 時 に 引数 を 渡し ます 。 通常 の 関数 呼び 出し と 同じ な 
の で すぐ に 慣れ る で し ょ 5 う 。 





car「 オ ブ ジ ェクト に メソ ッ ド を 定義 し て みよ う 


car オブ ジェ クト に 加速 (accelerate)、 減 速 (decelerate) 、 ド ライ ブ (drive) と いっ た メソ ッ ド を 定 
義 し 、 そ れ ら の 操作 を 可能 に する と 同時 に 、 ス ピー ド と ガソリン の 量 を 表示 する ペー ジ を 作っ て くだ さ 
い 。 drive メソ ッ ド は 運転 する 距離 を 引数 と し て と る も の と し ます 。 


Object-car2.html 


レア アルル: 


赤色 の ペン に 加え ぇ えて 、 青 色 、 緑 色 ほ いっ た ペン が 欲し く な り ま し た 。 以下 の よう に 個々 の ペン に つい て オブ 
ジェ クト を 宣 斉 する こと も 可能 で す 。 


Var DenR = { 
color: "red", 
length: 5, 
draw: function () { 
this.1ength -= 9.91: 


Var penG = { 
color: "green", 
length: 15, 
draw: function () { 
this.1ength -= 9.091: 


Var DenB = { 
color: "blue", 
length: 7, 
draw: function () { 
this.length -= 9.91: 


面倒 で す よ ね 。 ベ ペン が 100 本 に な っ た ら 対 応 で きま せん 。 同じ 種類 の オブ ジェ クト を 簡単 に 生成 する た め の 
方 法 が 用 意 き れ て いま す 。 以下 の よう に 記述 する こと が で きま す 。 


function Pen(color, length) { 
this.color = color: 
this.1ength = length: 
this.draw = function () { 
this.1ength -= 9.091: 


け 

var penR = new Pen("red", 5): 
var penG = new Pen("green”", 15): 
var penB = new Pen("blue”", 7): 


関数 Pen は 鉛 筆 オ ブ ジ ェクト を 生成 する た め の も の で す 。 こ の よう に 特定 の オブ ジェ クト を 作る た め に 定義 き 
れ た 関数 を | コン スト ラク タ | と 呼び ます 。 ちょ うど た だ た い 焼 き の 金 型 と た い 焼 き の 関 係 に 似 て いま す 。 コン スト ラ 
クタ は 金 型 に あたり ます 。 こ れ を も と に だ た 〈《 さ ん の た だ たい 焼き が 製造 きれ ます 。 た い 焼 き が オブ ジェ クト に 相当 し ま 
す 。 小豆 、 ク リー ム 、 チ ョ コ と いっ た 中 身 の あ ん は プロ パテ ィ に 相当 し ます 。 


た い 焼 き の 金 型 は コン スト ラク タ 、 た い 焼 き は オブ ジェ クト 


コン スト フク タ オブ ジェ クト 


プロ パテ ィ 





た い 焼 き を 大 量 に 生産 する 場合 、 金 型 は 必須 で す 。 オ ブ ジ ェクト も 大 量 に 作る 場合 は コン スト ラク タ を 用 意 
する の が 一 般 的 で す 。 

上 記 の 関数 Pen は 普通 の 関数 の よう に も 見 えま す 。 で は 、 普通 の 関数 と し コン スト ラク タ は どう や っ て 区 別 し た 
ら よ い の で し ょ うか ? 残念 な が ら 関 数 の 宣言 を 見 た だ け は 厳密 に 区 別 す る こと は で きま せん 。 区 別 は 呼び 出し 
側 で 行わ れ ま す 。 関数 を 呼び 出す 際 に 、 new と いう キー ワー ド を 付け る と コン スト ラク タ と し て 、 new が な い 場 
合 は 通常 の 関数 と し て 実行 きれ ます 。 上 の 例 で 、 


var penR = new Pen("red", 5): 


と new を つけ て 呼び 出し て いる の で 、 関 数 Pen は コン スト ラク タ だ と いう こと が わか る の で す 。 コ ンス トラ クタ は 
以下 の よう に 引数 を と る こと が で きま す 。 鯛焼 き オ ブ ジ ェクト な ら あ ん の 種類 が 引数 に な る で し ょ うか 。 個々 の オ 
ブ ジ ェクト の プロ パテ ィ を 初期 化す る 値 を 指定 する の が 一 般 的 で す 。 


隊 要 虹 義 
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function Pen(color, 1ength) { 
this.color = color: 
this.length = length: 


まだ た 、 コ ンス トラ クタ の 中 に this が あり ます が 、 こ れ は 先ほど 説明 し た よう に 自分 自身 の ひ オ ブ ジ ェクト を 参照 し 
ます 。 こ の 例 で は 、 引数 と し て 受け 取っ た color を 自分 自身 の ひ プ ロ パ ティ color に 設定 する と いう 動き に な り ま す 。 


この this を 付け 忘れ る ミス が 非常 に 多い の で 注意 し て くだ さい 。 


コン スト ラク タ を 使っ て オブ ジェ クト を 作成 する 例 を 以下 に 示し ます 。 


く !DOCTYPE html> 
く html> 
く <head> 
く <meta charset="UTF-8"> 
く SCT1Dt> 
function Pen(color, 1ength) { 
this.color = co1or: 
this.l1ength = length: 
this.draw = function () { 
this.1ength -= 9.91: 
け 
J 
var penR = new Pen("red", 5): 
var penG = new Pen("green", 15): 
var penB = new Pen("blue", 7): 
Var Den = DenR: 


function stroke() { 
pen .draw( ) : 


document . getElementById("col1or") .textContent = pen.color: 


Object-pen3.html 


document .getElementById("1ength") .textContent = pen.1ength: 


) 


function pickR() { pen = penR: } 


function pickG() { pen = penG: } 
function pickB() { pen = penB: } 
く / scr1Dt> 

く /head> 

く body> 


<button onc1ick="pickR() "> 赤 を 選ぶ </button> 

<button onclick="pickG() "> 緑 を 選ぶ </button> 

<button oncl1ick="pickB() "> 青 を 選ぶ </button> 

<button onclick="stroke() "> 書く </button> 

く D> 
鉛 雪 の 色 は <span id="co1or"></span>、 
長 さ は <span id="1ength"></span>cm 

く / D> 

く /body> 
く /html> 
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フラ ウザ 表示 例 


X 


上 放 員 | | D:\Book\JavaScript\Javac の ・ 
運ぶ | 線 5 ぶ | 青 を 選ぶ | 書く | 


紀 筆 の 色 は red、 長 さ は 4.99cm 





実際 に 入力 し て 確認 し て みよ う 
上 記 コ ー ド を 人 力 し て み ま し ょ う 。 


(3-7-3 | JavaScript か ら HTML を 操作 する ) 


EE まま まま も も も も も も も も も も も も も も III も も も も も も も も も に も も に も に も も に も に も に も に も に も に も に も に に も に も に も に も に も に も に も に に も に も に に に に に に も に も に に も に も も も も も も も も も もえ まま も も も まま もえ まま えま まま まま えま まま まま まま まま まま ミミ ネネ ミミ ミネ ミミ ミミ ミミ まま まま まま まま まま まま まま まま まま まま まま まま る まま る まま まま まま る るる まる まる る お る る れる る も ニニ] 


オブ ジェ クト に つい て だ いぶ 慣れ て きだ た と 思い ます 。 そろ そろ 、 avaScript と HTML の 連携 に つい て 触れ て 
い 千 まし ょ う 。 





6【oicdUlital 胃 34【Eiiitald に ct4【e【0M ク 中 導い 


これ まで 、 お まじ な い の よ うに 


document . getE1ementById( 表示 する 要素 の id ).textContent = 表示 する 値 : 


と する こと で 画面 の 表示 を 更新 し 、 


var 取得 する 値 = document.getE1ementById( 入力 要素 の id ).value 


で 入力 値 を 取得 する と 説明 し て きま し た 。 

オブ ジェ クト 、 プ ロ パ ティ 、 メ ソ ッ ド に つい て 説明 が 終わ っ た の で 、 こ の お まじ な い の 内 容 を 理解 する 準備 が 
整い まし た 。HTML 文書 を ブラ ウザ で 実行 する と 、 ブ ラウ ザ は HTML 文書 全体 を 示す オブ ジェ クト を 作成 し 、 
を の オブ ジェ クト へ の 参照 を 広域 変数 document に 格納 し ます 。 これ は HTML ブ ラウ ザ の 約束 事 で あり 、 どの 
ブラ ウザ で も 同じ 動き と な り ま す 。 document オ ブ ジ ェクト に は る さまざま な プロ パテ ィ ・ メ ソ ッ ド が 用 意 き れ て いま 
す 。 getElementByIld メソ ッ ド は その ひと つ で 、 引数 で 指定 され た id 属性 を も る つ 要 素 を 返し ます 。 
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getElementByld は document オブ ジェ クト の メソ ッ ド で 要素 を 返す 


Span 要素 
textContent 
rr LtextContent 
getElementByld (function  ) 


input 要 素 


Value 


getElementByIld メソ ッ ド か ら 返 され る 値 は 引数 に よっ て 異な り ま す 。span 要素 の id を 指定 し た ら span 要素 
が 、input 要素 の id を 指定 し た ら input 要素 が 返さ れ ま す 。span 要素 の 場合 は 画面 に 表示 する 内 容 は 
textContent プロ パテ ィ で 、 input 要素 の 場合 は 入力 値 は value プロ パテ ィ で 参照 で きま す 。 

ここ まで の 説明 を 整理 し まし ょ う 。 


① document - document オブ ジェ クト へ の 参照 を 保持 する 広域 変数 

② document.getElementByld(id) 一 document オブジェ クト の メソ ッ ド 呼び 出し 。 引 数 に 渡る れ た id の 要 
素 オ ブ ジ ェクト を 返す 

3③ document.getElementByld(id).textContent= 表示 する 値 一 document.getElementById(id) が 返し 
だ た オブ ジェ クト の プロ パテ ィ に 値 を 代 人 する こと で 画面 の 表示 を 更新 


これ まで 1 行 で 記述 し て いま し た が 、 2 行 で 記述 し た ほう が わか りや すい か も し れ ま せん 。 どちら も 同じ こと な の 
で 、 好 き な 方 法 を 使っ て くだ さい 。 


var obj = document.getElementById( 表示 する 要素 の id ): 
ob]j.textContent = pen.1ength: 


返さ れ た 要素 に よっ て 、 使え る プロ パテ ィ が 異な る 点 に 注意 し て くだ さい 。 た と えば 、 audio 要 素 に は play メ ソ ッ 
ド が あり ます が 、span 要素 に は play メソッド は あり ませ ん 。 こ れ は 要素 の 働き を 考え る と 納得 で きる と 思い ます 。 

で は 、 どの 要素 に どの よう な プロ パテ ィ 、 メ ソ ッ ド が ある の か 知り た く な り ま す よ ね 。 残念 な が ら プ ロ パ ティ や メ 
ソ ッ ド の 数 は 非常 に 多い の で 全部 覚え を る の は 現実 的 で は あり ませ ん 。 デ バッ ガー を 使っ て くだ さい 。 ブ レー ク ポ 
イン ト を 設定 し 、 実行 を 一 時 停止 し た 状態 で 、 ウ ォ ッ チ ウ イン ド ツ (呼び 方 は ブラ ウザ に よっ て 異な り ま す ) に 
| document.getElementById( id 値 )| の よう に 入力 する こと で 、 その 要素 の プロ パテ ィ や メソ ッ ド を みる こと が で 
きま す 。 プロ パテ ィ 名 と その 値 、 メ ソ ッ ド の 名 前 か ら 、 自分 が 必要 な 情報 が どこ に ある か 予想 し て 試し て みて くだ 
さい 。 最初 は 試行 錆 誤 する か も しれ ま せん が 、 そ の プロ セス こそ が 大 切な の で す 。 








| 了 レ 
| 
| 馬 還 object-car2.html XX ー オ ダチ 
15 doCuWETt . gctE1ementByid( "ga5 
19 } 
2 ひ 9 4 @ documentogetEiementByld("distance") 
21 function faster{ ) b IMeth Methods] 
22 Cgr .d て て EL1eratE( ) : 
昌 旨 aCCeDt 
accessKey 

24 function Ss1ower( ) { 7 
25 Car .deCeleratE( ) : の agn 
26 ) 「 巡 alt 
27 function drive() て < ゆ ATTRKIBUTE_NODE 
28 Var km = 相 OGMmWen も getE1e b g attributes 

夫 29 Car . drivVe( km ) : 3 @ autocomplete 
39 } が ゆ autofocus 
31 く /script> る: の bondies 
う 32 く /head> 
ー /nee ゆ canHaveChildren 
うう く body > Aa。 umnas 
34 <button onc1ick="faster( ) "> 加速 <, 呼び 出し 大証 ブレ ー ク ポイ ント 
35 <button onc1ick="s1ower( ) “> 浪速 <。 





nb。 選 ES @・ 旧 中 圏 軸 





5 語 』 オブ ジェ クト の メソ ッ ド 、 ブロ バテ ィ を 調べ て みよ う 








全 生 
N 
lobject HTMLinputElementl 
2 
lobject NamedNodeMap] 
false 
\ ン 


document オ ブ ジ ェクト に は どん な メソ ッ ド ・ プ ロ パ ティ が ある か 見 て み ま し ょ う 。 また 、HTML の 中 の 
適当 な 要素 を 参照 し 、 ど ん な メソ ッ ド ・ プ ロ パ ティ が ある か 見 て み ま し ょ う 。 


3-7-4 | JavaScript か ら CSS を 操作 する ) 


EE も も も も も も も も も も II に MM も に も も に に も に に に に に に に に に に も に も も に も に も に も に に に に も に も に も も も も も も も も も もえ えま まま まえ まま ミミ ミミ ミネ ネネ ネネ ミネ ミ ミネ ミネ ネネ ネネ ミネ ミミ ミネ ミ ミネ ミミ ミネ ミネ ミネ ミミ ミミ ミミ ミミ ミ まま まま まま まま まま まま まま まま まま まま まま まま まま まま まま まるまる まる も も ーー 


これ まで 、 JavaScript を 利用 し て 文字 を 表示 し た り 、 値 を 取得 し た りす る 方 法 を 説明 し て きま し た 。 次 に CSS 
の プロ パテ ィ を JavaScript か ら 操作 する 方 法 に つい て 説明 し まし ょ う 。 


く <!DOCTYPE html> 


く html> 
く head> 
く meta charset="UTF-8"> 
く SCF1Dt> 


function Pen(color, length) { 
this.color = color: 
this.length = length: 
this.draw = function () { 
this.length -= 1: 


var penR = new Pen("red", 15): 


var penG = new Pen("green", 29): 
new Pen("blue", 8): 


Var Den = DenR: 


Var DenB 


Object-pen4.html 
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function stroke() { 


Den .draw( ) : 
var pencil = document.getElementById( "penci1"): 


pencil.style.width = pen.1ength + "cm": 
penci1 .style.backgroundColor = pen.color: 
penci] .textContent = " 色 三 "+ pen.color + " 長 さ ニ " + pen.1ength: 





function pickR() { pen = penR: } 
function pickG() { pen = penG: } 
function pickB() { pen = penB: } 
く / SCF1Dt> 

く /head> 

く body> 


<button onclick="pickR() "> 赤 を 選ぶ </button> 
<button onc1ick="pickG( ) "> 緑 を 選ぶ </button> 
<button onc1lick="pickB() "> 青 を 選ぶ </button> 
<button onc1ick="stroke() "> 書く </button> 


< く pD 1d="penci1" style="background-col1or:red: width: 5cm: "></p> | 


く /body> 
く /html> 


フラ ウサ 表示 例 


2 ooowoscseeoyet 5・ と | @ ouexooooe 





| 書く] ボタ ン を 押す と 、 色 と 長き が 変化 し ます 。 こ れ は T]avaScript か ら CSS の 値 を 操作 し て いる か ら で す 。 
その 動作 手順 に つい て 見 て いき まし ょ う 。 ま ず 、HTML で は 過 の よう に 色 と 長 さき を 初期 化し て いま す 。 


Sp 1d="penci1" style="background-color:red: width: 5cm: "></p> 


次 に 、 証 の stroke 関数 を 見 て くだ さい 。 
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function stroke() { 
Den.draw( ) : 
var pencil] = document.getE1ementById( "penci1"): ゃ を 
pencil.style.width = pen.1ength + "cm": 
pencil . style.backgroundColor = pen.color: 
penci1 .textContent = " 色 三 "+ pen.color + " 長 さ デニ" + pen.1ength: 


PT 親 





還 で id=pencil | と いう 要素 、 す な わ ち <p> 要 素 の オブ ジェ クト を 取得 し て いま す 。 要素 の CSS 特 性 は style 
ブ プロパ ティ で 参照 きれ る オブ ジェ クト に 格納 され て いま す 。 そ の オブ ジェ クト の 中 の 個々 の CSS 特 性 の 値 を 参照 
すれ ば 現在 の CSS 特 性 の 値 が 取得 で き 、 値 を 代 人 人 する と CSS 値 が 更新 され ます 。 そ の 様子 を 以下 の 図 に 示 
し ます 


要素 の プロ パテ ィ は style オブ ジェ クト で まとめ て 管理 され て いる 


style オブ ジェ クト 


height 
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textContent 





ここ で 一 点 注意 し て ほし い の は 、 CSS 特 性 の 名 前 と 、 JavaScript で の プロ パテ ィ 名 の 対応 関係 で す 。width 
や height と いっ た 1 単語 か ら な る 名 前 の 場合 は 、 ど ちら も 同じ 名 前 を 使用 し ます 。 し か し な が ら 、「CSS 特 性 名 
に | 一 | (ハイ フン ) が 含ま れる 場合 、 JavaScript で は ハイ フン を 削除 し て 、 その 次 の 文字 を 大 文字 に する | と 
いう ルー ル が あり ます 。 例 を 見 て みる の が 一 番 わ か りや すい で し ょ う 。 

これ は 、TJavaScript で は ハイ フン は マイ ナス 演算 子 と し て 予約 され て いる た めで す 。 


CSS 特性 の 名 前 と JavaScript で の プロ パテ ィ 名 







CSS 特 性 名 に csteileit の PA を の キン 


DaCKgrOund-COIOr DaCkgrOundCOlOr 
DOrder-COIOTr DOrderCOIOr 
margin-left marginLeft 
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(3-7-5 | DOM (Document Object Model) ) 


最後 に 、 JavaScript か ら 要 素 を つく っ た り 、 削 除 し た りす る 方 法 に つい て 見 て いき まし ょ う 。 ち な み に 、DOM 
と は Document Object Model の 略 で 、 HTML 文書 を オブ ジェ クト と し て 操作 する 方 法 を 定 ゆ た も の で す 。 区 
し く 聞 こえ ます が 、 単 に ]avaScript か ら HTML 文書 を 更新 する 方 法 だ と 思っ て くだ さい 。 

HTML や CSS の 草 で 、 HTML 文書 は <html> 要素 を トッ プ と する 階層 構造 を と る と いう 説明 を し まし た 。 こ れ 
まで 、document.getElementBylId() メソッド を 使い 、 文 書 中 に 宣言 きれ て いる 有 要素 へ の 参照 を 取得 し て きま し 
た 。 実 は 、document オブ ジェ クト に は getElementById() 以外 に も る る さま ざま な メソ ッ ド が 用 意 き され て いま す 。 





b 倒 素 を 生成 する createElement()、 子 要素 を 挿入 する appendChild(child) 


document.createElement() メソ ッ ド を 使う と 、 要 素 を javaScript か ら 生 成す る こと が で きま す 。 例 を 見 て み ま 
し ょ う 。 





Object-create1.html 


く !DOCTYPE html> 
く html> 
く head> 
く meta charset="UTF-8"> 
く SCF1Dt> 
var colors = [ "red",。 "blue", "green", "yellow",。 "purple"]: 
var 1ndex = の: 
function insert() { 
Var parent = document .getElementById( "mylist"): "る 
var item = document .createElement("11"): に 
1tem.textContent = colors[index] : 
item.style.color = colors[index] : 
1ndex = ++index % colors.1ength: 
parent.appendChil1d(item):  e 
J 
く / SCr1Dt> 
く /head> 
く body> 
<button onc1ick="insert() "> 挿入 </button> 
く ol 1d="myl1St"> 3 
く /o1> 
く /body> 
く /html> 


insert() 関数 の 中 で 起き て いる こと に 着目 し て くだ さい 。 変数 parent 題 は ほ は mylist と いう id を 持つ 要素 還 、 す 
な わ ち <ol> へ の 参照 を 保持 し ます 。 


Pa 次 の | var item = documentcreateElement( 1 )] で 、 <ji> 要素 を 作成 し 、 そ の 参照 を 変数 item に 代 


入 し て いま す 。 こ れ で 、TavaScript か ら HTML 要素 が 作成 で きま し た 。 

し か し 、 この 友 階 で は まだ 画面 上 に < く ji> 要素 は 表示 きれ ませ ん 。 な ぜ な ら 、 画面 上 の どこ に 表示 し て よい か 
わか ら な いか ら で す 。HTML は 階層 構造 だ っ た こと を 思い 出し て くだ さい 。 今回 作成 し た <ji> 要素 $、 階 層 
構造 の どこ か に 挿入 し な く て は な り ま せん 。 そ の 処理 を 実行 し て いる の が 話 の 文 で す 。 


parent . appendChi1d(item ) 


appendChild と は 子供 を 追加 する と いう 5 意味 で す 。parent は <ol> 要素 へ の 参照 を 保持 し て いま し た 。 item は 
新規 に 作成 し た <ji> 要素 で す 。 つ まり 、<ol> 要素 に 対し て 、<ji> を 子供 と し て 追加 せよ と 命令 し て いる の で 
す 。 こ の 行 を 実行 する こと で 、 新しく 〈 作 成 し た <ji> 要素 が 、 <ol> 要素 に 挿入 き れ 、 画面 が 更新 され る こと に な 
り ま す 。 そ の 様子 を 以下 の 図 に 示し ます 。 


要素 を 作成 し て 子 要素 と し て 挿入 する 


var item = document.createElement( "11"): 





"green" 


appendChild は 文字 どおり | 追加 する 」 と いう 意味 な の で 、 最後 の 子 要 素 と し て 追加 され ます 。 





プロ グラ ム を 入力 し て 確認 し て みよ う 
サン プル の プロ グラ ム を 入力 し て 要素 が 追加 され る 様子 を 確認 し て み ま し ょ う 。 


同じ ょ うな 有 要素 を 数 多く 記述 する よう な 場合 に 、 この 手法 が 威力 を 発揮 し ます 。 た と えば 、 8xX8 の ゲー ム 盤 を 
考え て み ま し ょ う 。 HTML の Table 要素 を 使っ て 記述 する と 以下 の よう に な り ま す 。 


8X8 の ゲー ム 盤 


く <table 1d="board"> 
く 人 て F> 
く td 1d="Td9"> く / て td> 
く td 1d="Td1 "> く /td> 
く td 1d="Td2"> く / て td> 
く td 1d="Td3"> く / て td> 
く td 1d="Td4"> く / て td> 
く td 1d="Td5"> く / て td> 
く td 1d="Td6 "> く / て td> 
く td 1d="Td7 "> く </ て td> 
く / て tF> 
く 信 [> 


く td "> く / td> 





細 了 
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8 個 の <tr> 要素 、 を それぞれ に つい て 8 個 の <td> 要素 、 合計 64 個 の <td> 要素 を 繰り 返し 記述 し な く て は な 
り ま せん 。 こ うい っ た 単 純 な 繰り 返し 作業 こそ を コンピ ュー タ に 任せ る べき で す 。 


ReversiMock.html 


く !DOCTYPE html> 

















く html> 
く head> 
く meta charset="UTF-8"> 
< く style> 
#board { 
background-color : black : 
J 
td.cel] { 
background-color: green: 
width: 39Dx: 
height: 39Dx: 
J 
く / style> 
く SCF1Dt> 
function init() { 
var b = document. getElementById( "board"): 
for CVaP 3 ニ 人 : すく き も hk),f 
var tr = document.createElement( "tr"): 
TOF CVaF 倒さ 5 ドコ 9+) { 
var td = document.createElement("td"): e 放 
td.className = "cel11": 
td.id = "ce11"+ ォ ュ +j: + 
td.onclick = clicked: 
tr.appendChi1d(td) : e 工 3 
b.appendChi1d(tr): と そ すす 
。 
function clicked(e) { 
document .getElementById("info") .textContent = e.target.1d + " cl1]icked"・ 
J 
く / SCr1Dt> 
く /head> 


< く body onload="init( ) "> 
く table 1d="board"></table> 
く <h2 1d="1info"></h2> 

く /body> 

く /html> 


回 |vartr = document.createElement( tr )」 で <tr> 要素 を 作り 、 変 数 tr に 格納 し て いま す 。 


116 


その 後 、 回 の |var td = document.createElement( td )| で 要素 を 作り 、 話 の [trappendChild(td) | で 
tr の 子 要 素 に 挿 信 し て いま す 。 こ れ を 内 側 の for 文 回 で 8 回 繰り 返す こと で 1 行 の 要素 を 作っ て いま す 。 

さら に 、 外 側 の for 文 回 で 8 行 分 の 要素 も を つく り 、 そ れ ぞ れ の 行 を 思 の 「b.appendChild(tr) 」 で <table> に 
挿入 し て いま す 。 盤面 を 作る た め の コ ー ド 量 を 大 幅 に 削減 で きま し た 。 

な お 、HTML で 、TD 属性 、 CSS クラ ス 属 性 、 ク リッ ク 時 の イベ ント ハン ドラ を 設定 する 場合 は 、 


く td 1d="cel115” class="ce11" onclick="c1icked( ) "> く </td> 
の よう に 記述 し まし た が 、TavaScript で は 


var td = document.createElement("td"): 
td.className = "cel1": 

td.1d = “cel115"・: 

td.onclick = clicked: 


の よう に 記述 し ます 。 クリ ッ ク 時 に は 要素 の onclick プロ パテ ィ に 登録 し た 関数 が 呼び 出さ きれ ます 。 こ の 関数 を 
イベ ント ハン ドラ と 呼び びす 。 イ ベン ト ハ ンド ラ の 中 で は 、 ク リッ ク さ れ た 要素 へ の 参照 を e.target で 取得 し て 
いま す 。 イ ベン ト ハ ンド ラ は 後ほど 、 関 数 オプ ジェ クト で より 詳し 説明 し ます の で 、 こ こ で は 「 そ を ん な も の か 」 と 
思っ て お いて 下さ い 。 


目 分 で ゲー ム 和 角 を つく っ て みよ う 
兄 弟 で マル バツ ゲー ム が や り た いと 駄々 を こね 始め まし た 。 勝敗 の 判定 は 自分 た ち で で きる の で 、 ク 
リッ ク す る と 〇 と X が 表示 され れ ば 満足 な よう で す 。 そん な ペー ジ を 作っ て みて くだ さい 。 
TicTacToe.html 


( 3-7-6 | タイ マー 関連 の メソ ッ ド ) 

本 節 の 最後 に 、 一 定時 間 後 に 処理 を 実行 し た り 、 一 定 間隔 で 処理 を 実行 し た りす る 、 タイ マー 関連 の 主 な 
メソ ッ ド を 紹介 し まし ょ う 。 
タイ マー 関連 の メソ ッ ド 

メゾ ソ ッ ド 

SetTimeout(func, msec) msec ミ リ 秒 後に 関数 func を 1 回 呼び 出す 。 戻り 値 と し て timerld を か えす 


clearTimeout(t1d1 ) SetTimeout の 処理 を 停止 する 。 tid 1 は setTimeout の 戻り 値 


setInterva1(func, msec) msec ミ リ 秒 間隔 で 関数 func を 繰り 返し 呼び 出す 。 戻り 値 と し て timerld を か えす 


clearInterval (tid2) setlnterval の 処理 を 停止 する 。 tid ら は setlnterval の 戻り 値 
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実は これ ら の 関数 は window オブ ジェ クト の メソ ッ ド で す 。 よ っ て 、 厳密 に は 「window.setTimeout( 関数 名 . 
ミリ 秒 )」 と 書く の が 正しい 書き 方 な の で す が 、window オブ ジェ クト は 省略 する こと が で きま す 。 ゲー ム で よく 〈《 使 
う の は setlnterval() と clearInterval() で す 。 


timer.html 


く !DOCTYPE html> 
く html> 
く head> 
< く meta charset="UTF-8"> 
く SCF1Dt> 
var timerld = NaN, count = 9 の : 
function startTimer() { 
timerld = setInterva1(tick, 1999): 
J 
function stopTimer() { 
clearInterval(timerTd): 
ナ 
function tick() { 
COUnt++・ 
document . getElementById( "counter") .textContent = count: 
J 
く / SCF1Dt> 
く /head> 
く body> 
<button onclick="startTimer() "> スタ ー ト </button> 
<button onclick="stopTimer()"> ス トッ プ </button> 
く h2 1d="counter"></h2> 
く /body> 
く /html> 


ブラ ウザ 表示 例 


し < 


| byecocosesoreeos 


7 


| スタ ー ト | ボタ ン を 押す と 


timerld = setInterval1(tick, 1999) >: 


が 実行 きれ 、1 秒 ご と に 関数 tck が 呼び 出さ れ 、 数 字 の カウ ント が 始ま り ま す 。 スト ッ プ を 押す と 


clearInterva1(t1merLTd) 


が 実行 きれ 止ま り ま す 。 ち ゃ ん と 動い て いる よう に 見 えま す 。 し か し 、 ス ター ト ボ タン を 連打 する と 、 カ ウン タ 増 加 
の スピ ー ド が 速く な り 、 ス トッ プ を 押し て も 止ま ら な く な り ま す 。 な ぜ だ か わか り ま すか ? 


「 ス ター ト 」 ボタ ン を 連打 する と スト ッ プ が 効か な く な る 


る タイマー が ひと つ で あれ ば 意図 し た 正常 に 動作 する @ ス ター ト ボ タン を 連打 する と 、 同 時 に 複数 の タイ マー が 動き 始め る 


スタ ー ト tick() tick() tick() スタ ー ト tick() tick() tick() tick() 
1 秒 1 秒 上 1 秒 1 秒 1 秒 


スタ ー ト | tick() tick() 
「 1 秒 





スタ ー ト ボタ ン が 押さ れる と タイ マー が 開始 きれ ます 。 タ イマ ー が ひと つ で あれ ば 意図 し た 挙動 に な り ま す 。 し 
か し 、 ス ター ト ボ タン を 連打 する と 、 同 時 に 複数 の タイ マー が 動き 始め ます 。 スト ッ プ を 押し て クリ ア さ れる の は 
最後 の タイ マー だ け で す 。 こ の よう な 理由 で カウ ンタ が 止ま ら な か っ た の で す 。 こ の よう な 状況 を 回 避 す る た め 
に 、 タ イマ ー を 開始 する と き は 最初 に タイ マー を クリ ア す る 習慣 を つけ る と よい で し ょ う 。 


function startTimer() { 
clearInterva1(timerLd) : 
timerId = setInterval(tick, 1999) : 


ほぼ すべ て の リア ル タ イ ム ゲ ー ム で は setlInterval() を 呼び 出し 、 定 期 的 に 特定 の 関数 を 実行 し て いま す 。 
詳し く は 後半 の ゲー ム を 参照 し て くだ さい 。 

と ころ で 、 と きど き setlnterval で 関数 を 呼び 出す 間隔 を 10msc や 5msec と いっ た 非常 に 小さ な 値 に し て いる 
ケー ス を 見 か け ま す 。 残念 な が ら あ まり お 勧め で きま せん 。 多く の 液晶 ディ スプ レイ の 更新 聞 隔 は 60 ヘル ツ で 
す 。 す な わ ち 1 秒間 に 60 回 画面 が 書き 換え られ る と いう こと に な り ま す 。 1/60 = 16.666msec な の で 、 これ 以上 
高い 頻度 で タイ マー を 更新 し て も 無 意 味 な こと が 多い か ら で す 。 呼び 出し 間隔 を 短く する ほど CPU に 負荷 が か 
か り ま す 。 む や み に 更 新聞 隔 を 短く する の で は な く 、 適 当 な 更新 聞 隔 を 見 つけ る こと が 大 切 で す 。 
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う -0① 組み 込み オブ ジェ クト 


これ れ まで 目 分 で オブ ジェ クト を 作る 方 法 や 、HTML 文書 の 要素 を オブ ジェ クト と し て 
探 作 する 方 法 に つい て 見 て きま し た 。 実は 、JavaScript に は あら か じい めい くつ か 
の オブ ジェ クト が 用 意 さ ご され て いま す 。 こ の よう な オブ ジェ クト を 「 組 み 込み オブ ジェ 
ント 」 と 呼び ます 。 


(3-8-1 | Date オブ ジェ クト ) 


日 付 や 時 刻 を 扱う 2 た め の オ ブ ジ ェクト で す 。 日 時 ・ 時 刻 の 取得 や 設定 の た め に 数 多く の メソ ッ ド を 提供 し て 
いま す 。 
date0.htm 


く !DOCTYPE html> 


く html> 
く head> 
く meta charset="UTF-8"> 
く SCF1Dt> 
function update() { 
var now = new Date( ) : 
document .getElementByTd( "year") .textContent = now.getFu11Year() : 
document . getElementById( "month") .textContent = (now.getMonth() + 1): 
document.getElementById("date") .textContent = now.getDate() : 
document .getElementById("hour") .textContent = now.getHours() : 
document . getElementById( "min") .textContent = now.getMinutes() : 
document.getElementById("sec") .textContent = now.getSeconds() : 
document .getElementById("msec") .textContent = now.getMi111iseconds() : 
J 
く / SCF1Dt> 
く /head> 
く body onl1oad="update() "> 


く Dp> 
<span 1d="year"></span> 年 
<span 1d="month"></span> 月 
く span 1d="date "></span> 日 
<span 1d="hour"></span> 時 
<span 1d="min"></span> 分 
<span 1d="sec"></span> 秒 
く <span 1d="msec"></span> ミリ 

く / D> 
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<button onclick="update() "> 更新 </button> 
く /body> 
く /html> 


フラ ウザ 表示 例 


X 
と っ ] D:\BookwJavaScriptJavaE D ・ O | 。 


2015 年 7 月 13 日 21 時 25 分 49 秒 S00 ミ リ 


| 更新 | 





| var now new Date()」 と する と 現在 時 刻 の Date オブ ジェ クト が 生成 され ます 。 主 な メソ ッ ド に 以下 の よさ 
うな も の が あり ます 。 


Date オブ ジェ クト の 主 な メソ ッ ド 
タプ ムリ 月 に 説明 


getMonth( ) 月 を 返す 。 1 月 は 0、 ら 月 は 1 … の よう に 0 か ら 始 まる こと に 注意 


getT1ime( ) 1970 年 1 月 1 日 00:00:00UTC か が ら の 経過 ミリ 秒 を 返す 






















スト ッ プ ウォ ッ チ で 経過 時 間 を 表示 する ペー ジ を つく っ て みよ う 
スト ッ プ ウォ ッ チ で 10 秒 ち ょ うど を 計る 遊び を し た こと が ある と 思い ます 。 ス ター ト ボ タン 、 ス トッ プ ボ タン 
を 用 意 し 、 ス ター ト ボ タン を 押し て か ら ス トッ プ ボ タン を 押す まで の 経過 時 間 を 表示 する ペー ジ を つく っ て 
くだ さい 。 それ ぞ れ の ボタ ン を 押下 し た と き に 、 別 々 の Date オ ブ ジ ェクト を 作成 し 、 そ れ ぞ れ の 
getTime() メソ ッ ド の 戻り 値 の 差分 を 計算 する こと で 経過 時 間 を 求め る こと が で きま す 。 
date 1.htm 


較 
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(3-8-2 | Math オブ ジェ クト ) 


各種 計算 を 行う た め の メ ソ ッ ド を 提供 し て いま す 。 主 な メソ ッ ド に 以下 の よう な も る の が あり ます 。 


Math オブ ジェ クト の 主 な メソ ッ ド 
メゾ ッ ド 


説明 


Math.f1oor(n) 小数 点 以 下 の 値 を 切り 捨て た 値 を 返す 














Math. cei1(n) 小数 点 以 下 の 値 を 切り 上 げた 値 を 返す 


ゲー ム に 乱数 は 欠か せま せん 。 サイ コロ な ら 0 一 5 まで 、 ト ラン プ な ら 0 一 12 ま で の ラン ダム な 数 値 を 生成 す 
る 必要 が ある で し ょ う 。Math オブ ジェ クト に は random() と いう メソ ッ ド が あり ます が 、 生成 され る 値 は 0 か ら 1 未 
滴 の 小数 で す 。 こ れ を ある 一 定 の 和男 囲 の 整数 に マッ ピン グ す る た め に は Mathjloor(n) を 利用 し ます 。0 5 ま 
で の 6 つの 乱数 を 生成 する 例 を 以下 に 示し ます 。 


random0O.html 


く !DOCTYPE html> 
く html> 
く head> 
く meta charset="UTF-8"> 
く SCF1Dt> 
function random() { 
varr= Math.floor(Math.random() * 6): 
document . getElementById( "value") .textContent = r: 
J 
く / SCF1Dt> 
く /head> 
く body> 
<button onclick="random() "> 乱数 :<span id="value "></span></button> 
く /body> 
く /html> 


演 習 ら ー5 の 乱数 を 生成 し て みよ う 


上 記 プ ログ ラム は 0 5 の 乱数 を 生成 し まし た 。 上 の プロ グラ ム に 1 行 追加 し て 、 い っ た ん 生成 し た 
知 数 r が 2 か ら 5 の 範囲 に 収まる よう に し て くだ さい 。 





random1.html 
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(3-8-3 | Array オブ ジェ クト ) 


ボボ ポポ ボボ ネネ ボネ ネギ ポポ ボネ ボボ ポポ ボボ ボボ ボ ボ や や や 


TavaScript で 配列 を 作っ た 場合 、 そ れ ら は 必ず Array オブ ジェ クト と な り ま す 。 よ っ て 、Array オブ ジェ クト 
の プロ パテ ィ や メソ ッ ド が も れ な く 利 用 で きま す 。 た と えば 、 ど ん な 配列 で も length プロ パテ ィ で 配列 の サイ ズ が 
取得 で きま す が 、 こ れ は 配列 が Array オブ ジェ クト だ か ら で す 。 

主 な メソ ッ ド を 以下 に 列 争 し ます 。 

Array オプ ジェ クト の 主 な メソ ッ ド 
レア ムン に 説明 
puSh(a) 配列 の 最後 に 要素 a を 追加 する 


1astTndex0f( 検 索 対象 [, 検索 位置 ]) 


これ ら の メソ ッ ド の 動き を 確認 する ペー ジ を 以下 に 示し ます 。 
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arrayO.html 


く <!DOCTYPE html> 
く html> 
く head> 
く <meta charset="UTF-8"> 
く SCT1Dt> 
居所 も 0 


function push() { 
var v = Math.floor(Math. random() * 19): 
var r = data.push(V) : 
upDdate(r): 

J 

function poD() { 
var r = data.DoD() : 
upDdate(r) : 

J 

function shift() { 
var r = data.shift( ) : 
update(F): 

ナ 

function Splice() { 
var r = data.splice(3, 2): 
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upDdate(r): 

」 

function update(rva1) { 
document.getElementById( "data") .textContent = data: 
document.getElementById("1ength") .textContent = data.1ength: 
document . getElementByTd( "rva1") .textContent = rva] : 
var v9 = data.indexOf(7): 
var v1 = data.lastIndexOf(7): 


document. getElementById("19") .textContent = vV9: 
document. getElementByTId( "11") .textContent = V1: 
け 
く / SCF1Dt> 
く /head> 
く body> 


く button onclick="push() ">push()</button> 

く button onclick="pop() ">pop( ) く </button> 

く button onclick="shift() ">shift()</button> 

く button onclick="sp1ice() ">sp1ice(3, 2)</button> 


く ul style="font-size : 29Dx : "> 
<1i> 配 列 デ ー タ : <span id="data"></span></11i> 
<1i>1ength プ ロバ ティ : <span id="1ength"></span></1i> 
く 1i> 戻 値 : <span 1d="rva1 "></span></1i> 
く ]i>indexOf(7) : <span 1d="19"></ span> く /1 1i> 
く 1i>lastTndexOf(7) : <span 1d="11"></span> く /1i> 

く /u」> 

く /Dbody> 
く / html> 


フラ ウザ 表示 例 


3 
5 誰 | D:*BookavaSrptwavas D ・ で | 


・ 配列 デー タ :1.8.5.7.2.6,7.4.0.4 


・leneth プ ロ パ ティ : 10 
・ 戻 値 :10 

・ indexOf(7): 3 

・ lastIndexOt(7): 6 








上 記 プ ログ ラム を 実際 に 入力 し て 実行 し て みよ う 
上 記 プ ログ ラム を 入力 し て 実行 し て くだ さい 。 そ れ ぞ れ の メソ ッ ド の 働き と 戻り 値 を 確認 し て くだ さい 。 
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(3-8-4 | String オブ ジェ クト ) 


キキ キキ キキ ドキ ドキ ドキ キキ キキ ボキ ギ キキ ボキ ボボ ギ ボ ギ ボキ ボキ ボキ ボ ボキ ネネ ボボ ボネ ボド ボネ ネネ ボボ ボボ ネネ ボネ キネ ボネ ネオ ボボ ネネ ネネ キネ ネネ ネネ ボネ ボネ ボボ ネネ ネネ ボボ ネネ ネネ ネネ ネネ ネネ ボボ ポポ ネネ ネネ ボネ ネネ ボネ ネネ ボネ ボボ ポポ ポポ ネネ ボネ ネネ ネネ ネネ ポポ ネネ ネネ ネネ ボネ ボネ ボネ ネネ ポポ ポポ ボネ ネネ ボネ ネネ ネネ ボネ ネ ボネ ネネ ボネ ボネ ネネ ネネ ネネ ネネ ネネ 


配列 が Array オブ ジェ クト で あっ た よう に 、TavaScript で の 文字 列 は String オブ ジェ クト と な り ま す ※。 ま た 、 う 


配列 の 要素 数 を length プ ロ パ ティ で 取得 で きた の と 同様 に 、 文字 列 の 長き ぉ length プロ パテ ィ で 取得 で きま す 。 
主 な メソ ッ ド を 以下 に 列挙 し ます 。 


※ 厳密 に は 単なる 文字 列 と オブ ジェ クト は 異な り ま す 。 し か し な が ら 、 暗黙 な 型 変換 が 行わ れる た め 、 文 字 列 も オブ ジェ クト の よう に 扱 
うこ と が で きま す 。 


String オプ ジェ クト の 主 な メソ ッ ド 
メゾ ソ ッ ド 


説明 
charAt(1 ) | 番目 の 文字 を 返す 
1ndexOf(c) 引数 の 検索 対象 C を 先頭 か ら 探し 、 そ の 番号 を 返し ます 。 な い 場 合 は - 1 を 返す 


1astIndexOf(c) 引数 の 検索 対象 C を つ し ろか ら 探 し 、 そ の 番号 を 返す 。 な い 場 合 は - 1] を 返す 
startsWith(str) 引数 で 指定 され た 文字 列 で 開始 され て いる か を 返す 


substr(start, ]ength) 指定 し た 位置 か ら length 文字 数 分 返す 


文字 列 オ ブ ジ ェクト を 使っ た サン プル を 以下 に 示し ます 。 動い て いる 様子 を 実際 に 確認 する の が 一 番 で す 。 





kaibun.html 
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く !DOCTYPE html> 
く html> 
く <head> 
< く meta charset="UTF-8"> 
く SCF1Dt> 
var data =[ 
3【r タケ ヤズ ヤギ ケタ ” pn: "数 焼け た うう 

str: "人 タケ ムラ タケ コ コケ タラ ム ケ タ "。 jpn: "竹村 起 子 こけ た ら 剥 けた ” }。 
8 を PO の デコ コア 久 ナ Sp ナス ペデ ゴ ヨコ 出 到 な とう 
str: "リカ ガ カ リ "。 jpn: "理科 係 " }。 
str: "イカ ノダ ンス ハス ンタ ダ ノ カ イ ", jpn: "烏賊 ひい ダンス は 済ん だ の か い " }。, 
str: " ヨ ノ ナカ ネ カオ カオ カネ カナ ノ ヨ ", jpn: "世の中 ね 顔 か お 金 か な の よ " }, 


へ r ふ / や の 


var timertd, index = 9 の, pos = 9: 


function start() { 
DOS = の : 
document.getElementById("]pn") .textContent = "": 
1ndex = (index + 1) % data.1ength: 
clearInterval(timerLd) : 
timerTd = setInterval(tick, 299): 
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function tick() { 
var str = data[index] . str: 
document.getElementById("str") .textContent = str.substr(9, pos) : 
1f (++pos > str.1length) { 
clearInterva1(timer1d) : 
document.getElementById("]jpn").textContent = data[index] . pn: 


} 
ナ 
く / SCr1Dt> 
く /head> 
< く body> 


<button onclick="start()"> ス ター ト </button> 
< く h2 1d="str"></h2> 
く <h2 1d="]pn"> く /h2> 
く /body> 
く /html> 


ブラ ウザ 表示 例 


X 
記 斉 諾 串 | D:\Book\JavaScript\Javac の ・ 〇 


スタ ー ト 


イカ ノダ ンス ハス ン 
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う 3_0 | プロト タイ プ 
多く の オブ ジェ クト 指向 言語 で は | 継承 ] と いう 仕組 み を 使っ て 、 オ ブ ジ ェクト を 再 
利用 し ます が 、JavaScriDt で は 「 プ ロト タイ プ 」 と いう 仕組 み を 使い ます 。 プ ロト 
タイ プ は JavaScript の 学習 に お いて 大 き な 壁 の ひと つ で す 。 本 書 で は 類書 と は 
ちょ っ と 違っ た 視点 から 説明 し て みた いと 思い ます 。 


(3-9-1 | プロ ト タ イプ と は ) 


EE も も も も も も も ま も も も も も も も も も II も も IIIIIISISIIIEIIEIIEIEIEIEIEIEIEI も も た も に も に に に に に に も に も に も に も に に に も も も も も に も に に に に に に に に も に も も も も も も も も まま も まま も まま まま まま まま まま まま まま ミネ ネネ ミネ ミミ ミネ ミネ ネネ ネネ ミネ まま まま えま まま まる まる る る まま まま まる まる る まる まる る る る まる まる る る る る る る た も お ニニ ニニ 


JavaScript で 文字 列 を 作る と 、charAt() メソ ッ ド を 使っ て 該当 する 場所 の 文字 が 取得 で きま す 。 


var str = "Hel11o wor1d": // 文字 列 オ ブ ジ ェクト を 作成 
var Cc9 = str.charAt(09) : // c の 9 は H 
var c1 = str.charAt(1): // c1 は e' 


一 方 、 配列 を 作る と 、push()/pop()) と いっ た メソ ッ ド を 利用 し て デー タ の 出し 入れ が で きま す 。 


var data = []: // 配列 オブ ジェ クト を 作成 
data.push(1) : // 1' を 追加 
var d1 = data.poDp( ) : // d1 は 1 


し か し 、 配列 に 対し て charAt() メ ソ ッ ド を 呼び 出す こと は で きま せん 。 反対 に 、 文字 列 に 対し て push() や pop() 
と いっ た だ た メソッド を 呼び 出す こと も で きま せん 。 な ぜ で し ょ う が か? 


var str = "Hel11o wor1d": // 文字 列 オ ブ ジ ェクト を 作成 
str.push(2) : // エマ ラー 


ほか の オブ ジェ クト 指向 言語 を ご 存じ の 方 で も われ ば 「 型 が 違う か ら 呼 び 出せ る メソ ッ ド が 違う の は 当たり 前 
で し ょ ?」 と 考え る か も し れ ま せん 。 し か し 、TavaScript に は 厳密 な 型 は な い の で 、 こ の 答え は 正しく あり ませ ん 。 
この 挙動 を 理解 する 鍵 が プロ ト タ イ プ な の で す 。 

JavaScript で オブ ジェ クト を 生成 する と 、 そ を の オブ ジェ クト に は prototype と いう 見 えな い プ ロ パ ティ が 暗黙 の 
うち に 追加 され 、 を の プロ パテ ィ は 別 の オブ ジェ クト を 参照 し ます 。 た と えば 、 以 下 の よ うに 文字 列 オ ブ ジ ェクト 
を 作成 し た と し ます 。 


半 較 WW 
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var str の 9 = new String( "Hell1o"): 


する と 、 この strO0 オ ブ ジェ クト に は 、 暗黙 の プロ パテ ィ prototype が 設定 され 、 別 の オブ ジェ クト を 参照 し ます 。 


暗黙 の プロ パテ ィ prototype が 別 の オブ ジェ クト を 参照 する 


StrO 





ここ で 、 も う ひ と つ 別 の 文字 列 オ ブ ジ ェクト を 作っ て み ま す 。 


var Sstr1 = new String( "Wor1d"): 


オブ ジェ クト の 関係 は 以下 の よう に な り ま す 。 str0 と str1 は まっ た く 別 の オブ ジェ クト な の に 、prototype の 参 
照 先 は 同一 で ある こと に 着目 し て くだ さい 。 


prototype の 参照 先 は 同一 









StrO 
の 


この prototype の 参照 先 オ ブ ジ ェクト が どの よう な も の か 気 に な り ま す よ ね ? し か し 、 






p9 = str9.prototype : // p9 は undefined 


と し て も 参照 先 に た どり 着く こと は で きま せん 。 当初 、 JavaScript に お いて 、 prototype は 「 暗 黙 の 参照 先 | と し 
て 設計 る され た こと も あり 、 プログ ラム で 明示 的 に 辿る こと は で きま せん で し た 。 と は いう も の の 、 や は りこ の 
prototyDe に アク セス し た いと いう 需要 に は 強い も の が あり まし た 。 そ の よう な 状況 を 受け て 、 prototype へ の 参 
内 を 辿る た め の メ ソ ッ ド が 正式 に 規定 され まし た 。 以下 の よう に 記述 する こと で prototype へ の 参照 が 取得 で き 
の 


p9 = Object.getPrototypeOf(str9): 


strO0 と str1 の prototype が 同じ オブ ジェ クト を 参照 し て いる か 確認 し て み ま し ょ う 。 


var Str9 = new String( "Hello"): 
p9 = Object.getPrototypeOf(str9) : 


var Sstr1 = new String( "Wor1d"): 
p1 = Object.getPrototypeO0f(Str1): 


var isTdentica] = (p の === p1): // true に な り ま す 


| == モ =」 は 厳密 な 比較 を する 演算 子 で す 。 オ ブ ジ ェクト の 比較 に 使用 し た 場合 、 左 辺 と 右辺 が 同じ オブ 
ジェ クト か 償 か を 比較 し ます 。 上記 の 例 で は 、 p0 も p1 も 同じ オブ ジェ クト を 参照 し て いる の で isIdentical は true 
と な り ま す 。 

prototype の 参照 先 で ある p0 オブ ジェ クト が 取得 で きま し た 。 で は 、 こ れ に どの よう な プロ パテ ィ が ある か デ 
バッ ガ を 使っ て 見 て み ま し ょ う 。 


デバ ッ ガ で p0 オブ ジェ クト の プロ パテ ィ を 確認 


ーー ー ロロ 交 


sa UI 
UI | 


ーー 


34 ず - | ョ 14 | 本 






ー ル デバ ッ ガ ー (⑪ 監 2 2 | # 





DOM Explorei ーー の の 
と 1 5。 所 滞 仙 - 目 因 | 還 | 軸 ファ イル 内 の 検索 (Ct 


| 馬 較 scrap.html X ヴォ ッ チ 
























</ へ 人 る 
Z8 
っ 9 4 PU 
3 の 4 [Methodsil 
う 1 b anchor function anchor(0) ( [.. 
32 var str の 9 = new String("He11o" ) : b @ big functon big() { [nat.…… 
33 pO = Ob]ect . getPrototypeOf ( sr の ) : b ⑳ blink function blink() { [na.. p0 の メソ ッ ド 
34 b @ bold functon bold() { [nat.. 
や 5 var str1 = new String("kor1d") : し b ⑫ charAt function charAt() { [.. 
36 p1 = ObJect.getPrototypeOf(str1): の bcharCodeAt function charCodeAt.… 
。 b ⑲ concat functon concat() { [. 
晴 に 3 b め constructor function String() { [n.… 
49 呼び 出し 届 歴 ブレ ー ク ボイン ト 


画面 石 側 に DO0 の メソ ッ ド 一 覧 が 表示 る され て いま す 。charAt charCodeAt, concat な ど String オブジェ クト 
固有 の メソ ッ ド が 定義 きれ て いる こと が わか り ま す 。 

つま り 、 文字 列 オ ブ ジ ェクト を 作成 し た 場合 、 charAt な どの メソ ッ ド が 呼べ た の は 、 prototype で 参照 され る 
オブ ジェ クト に charAt メ ソ ッ ド が 定義 きれ て いた か ら な の で す 。 

で も ちょ っ と 待っ て くだ さい 。 前 の 例 で は 、 文 字 列 オブ ジェ クト str0 に 対し て charAt メ ソ ッ ド を 呼び 出し まし 
た 。prototype オ ブ ジェ クト に charAt メ ソ ッ ド が ある こと は 確認 で きま し た が 、 str0 オブジェ クト に charAt メ ソ ッ 
ド が な いこ と に 変わ り は あり ませ ん 。 


e | 装 股 ③1dIJOSBAET < 


\N へ 人 立 テ ロト 
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charAt メ ソ ッ ド は prototype オブ ジェ クト に は ある が str0 オブ ジェ クト に は な い 
charAt 


StrO 





な せ ぜ strO.charAt(0) の よう に 、str0 に 対し て charAt0 メ ソ ッ ド が 呼び 出せ た の で し ょ うか ? これ こそ が 、 
]avaScriDpt の プロ ト タ イ プ 継 豪 に ほか な り ま せん 。 
]avaScript で は プロ パテ ィ が 参照 され た と き 、 


。 プロ パテ ィ が その オブ ジェ クト で 定義 S さ れ て いれ ば 、 その プロ パテ ィ を 参照 する 
・ 定義 され て いな けれ ば prototype で 参照 され る 先 の オブ ジェ クト で 同じ こと を 行う 


と いう 動作 を prototype が 辿れ な く な る まで 繰り 返し ます 。 
今回 の 場合 、 StrO0 オブ ジェ クト の charAt0 メソ ッ ド が 参照 され まし た 。 し か し 、 strO オ ブ ジ ェクト に は その よう 
な メソ ッ ド が 定義 きれ て いな か っ た た め 、 prototype の 参照 先 を 見 て 、 を こ に あっ た charAt() が 呼び 出さ れ た の 
史 の 例 で きら に 詳し く 見 て み ま し ょ う 。 ObjectA に 対し て start())、sayHello()、startPlay(0) と いっ た メソ ッ ド を 
呼び 出し た と し ます 。 


ObjectA に 対し て start()、sayHello()、startPlay() を 呼び 出す 


start sayHello startPlay 


sayHello 関数 startPlay 関数 





start() か ら 始 め ま し ょ う 。 ObjectA に は start() メソッド が ある の で 、 普 通 に 呼び 出す こと が で きま す 。 で は 、 
sayHello)) メ ソ ッ ド は どう で し ょ うか ? ObjectA に は その よう な メソ ッ ド は あり ませ ん 。 そこ で 、ObjectA の 


prototype を 参照 し ます 。 参照 先 の ObjectB に は sayHello() メソ ッ ド が 定義 きれ て いる の で 、 この 関数 が 実行 
され ます 。 一 方 、 startPlay() は どう で し ょ うか ? ObjectA に メソ ッ ド が な い の で 、 prototype を 辿り ます 。 し か し 、 
startPlay() は ObjectB に も 定義 きれ て いま せん 。 そこ で 、 さ ら に prototype を 辿り 、ObjectC に た どり 着き ます 。 
ここ で startPlay() メソ ッ ド が 見 つか る の で 、 こ の 関数 が 実行 され ます 。 


(3-9-3 | プロトタイプ の 利点 
で は 、 なぜ この よう な ブロ ト タ イ プ と いう 仕組 み が 用 意 き され た の で し ょ うか ? どん な 利点 が ある の で し ょ うか ? プ 
ロト タイ プ が な か っ た 場合 と 比較 し な が ら そ の 理由 を 考え て み ま し ょ う 。 


ぁ 過去 の 資産 を 活用 で きる 





舌 語 の 言い 回 し に |Reinventng the wheel と いう も の が あり ます 。「 車 輪 の 再発 明 | と ぉ 訳 き れ ま す が 、 
すでに ある も の を 作り 直す の は 無駄 で す よ ね ? プロ グラ ミン グ の 世界 で も る 、 過 去 に 作っ た も の は 積極 的 に 再 利 
用 する こと が 推 差 さ れ ま す 。 関数 に よる 処理 の 抽象 化 、 ラ イブ ラリ の 導入 、 オ ブ ジ ェクト 指向 言語 に お ける 「 継 
承 」、 これ ら は まさ に 過去 の 資産 を 活用 する た め の 仕組 み で す 。 プ ロト タイ プ も 同じ で す 。 Animal と いう 動物 を 
表わす クラ ス を つく っ て eat()、sleep() と いう メソ ッ ド を 定義 し た と し ます 。 


Animal クラ ス で eat()、sleep() メソ ッ ド を 定義 





その 後 で 、Human と いう 人 間 を 表わす クラ ス を 作る 必要 が で て きま し た 。 話す こと は 人 間 の 特権 で す 。 よ っ 
て 、eat()、sleep() に 加え て speak() と いう メソ ッ ド が 必要 に な り ま し た 。 
これ ら 3 つ の メソ ッ ド を 持つ Human クラ ス を 最初 か ら 作成 する こと も 可能 で す 。 


Human クラ ス で eat()、sleep()、speak() メソ ッ ド を 定義 





計 果 
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人 間 も 動 物 の 一 種 で す 。 話 す だ け で な く 〈 食 べた り 有 眠っ た り し ます 。 せ っ が かく Animal と いう クラ ス が ある の で あ 
れ ば 、 それ を 活用 し な い 手 は あり ませ ん 。 以下 の よう に Human オブジェ クト の プロ ト タ イ プ と し て Animal を 参照 
する 方 法 も あり ます 。 


Human オブ ジェ クト の プロ ト タ イ プ と し て Animal を 参照 





ブ プロトタイプ を 活用 すれ ば 、 新 規 に 実装 する 必要 が ある の は speak() と いう メソ ッ ド だ け に な る の で 、 お そら く < 
実装 負担 は 軽く な る で し ょ う 。 


メモ リ 消 費 量 が 少な い 


| Hello」 | World」 | Welcome」 と いう 3 つの String オ ブ ジ ェクト を 作っ た と し ます 。 それ ぞ れ の オブ ジェ クト 
に 対し て charAt、 charCodeAt、 concat と いっ た メソッド が 呼び 出せ る よう に する に は 、 各 オブ ジェ クト に メソ ッ 
ド を 作成 ・ 登 録 し な く て は な り ま せん 。 オブ ジェ クト を 生成 する と を その 分 メモ リ が 消費 きれ ます 。 メソ ッ ド の 数 が 
多い 場合 は メモ リ 消 費 量 が 膨大 に な っ て し まい ます 。 





オフ ジェ クト ご と に 同じ メソ ッ ド を つく る の は メモ リ の 無駄 





一 方 、 プ ロト タイ プ を 使っ た 場合 、 オ ブ ジ ェクト の 様子 は 以下 の よう に な り ま す 。 


プロ ト タ イ プ を 利用 する と メソ ッ ド を 共用 で きる 





ブ プロトタイプ を 使っ た ほう が 、 メ モリ の 消費 量 が 少な いこ と が わか り ま す 。 を その 効果 は メソ ッ ド の 数 が 増え る に 
つれ 、 作 成す る オブ ジェ クト が 増え る ろ る に つれ 顕著 に な っ て いき ます 。 


p 修正 向 所 を 限定 で きる 





JavaScript で は 実行 中 に メソ ッ ド の 内 容 を 変更 する こと が 可能 で す 。 た と えば charCodeAt() は Unicode の 
文字 コー ド の 数 値 を 返し ます が 、 何ら か の 理由 で STIS の 文字 コー ド 値 を 返す よう に 修正 し た く な っ た と 仮定 し ま 
し ょ う 。 プロ ト タ イ プ ブ が な か っ た と する と 、 全 部 の String オブ ジェ クト の charCodeAt メ ソ ッ ド の 内 容 を 修正 する 
必要 が あり ます 。 一 方 、 プ ロト タイ プ が ある 場合 、 修 正 箇所 は 1 か 所 で 済み ます 。 


( 3.94 | プロ ト タ イプ の 設定 方 法 ) 

ここ まで |「 ブ プロトタイプ と は どの よう な も の か 」 と いっ た 概念 に つい て 説明 し て きま し た 。 次 に 、 avaScript で プ 
ロト タイ プ を 使う に は 具体 的 に どの よう に し た ら よ いか 見 て いき まし ょ う 。 

ここ で ボイン ト と な る の は | ブロ ト タ イ プ は 暗黙 の 参照 で あり 、 プ ログ ラマ ー が 明示 的 に 設定 する る の で は な 
い 」 と いう こと で す 。 すなわち 、 以 下 の よ うな 考え方 は 正しく あり ませ ん 。 


var Sstr の 9 = new String( "Hel1o"): 
str9.prototype = someOtherObject: // prototype を 自分 で 明示 的 に 設定 する の は 正しく な い 


人 確か に strO オ ブ ジ ェクト に は prototype と いう プロ パテ ィ が 追加 され 、 その 参照 先 が someOtherObject と な り 
ます 。 し か し 、 こ の 例 で の prototype は 単なる プロ パテ ィ の ひと つ に 過ぎ ず 、 呼 び 出さ れ た と き に 参照 先 を 辿っ 
て い 〈 と いう プロトタイプ と し て の 働き は し て くれ ませ ん 。 

そもそも 、 この 例 の よう に オブ ジェ クト を 生成 する た びに プロ グラ マー が プロ ト タ イ プ を 設定 する の は 面倒 で す 。 
ブ プロトタイプ の 設定 を 忘れ て 、 意図 し な い 挙 動 に な が る こと も ある で し ょ う 。 ご 安心 くだ さい 。 TavaScript で は も っ と 
よい 方 法 が 用 意 る きれ て いま す 。 

JavaScript で オブ ジェ クト を 作る 際 に は コン スト ラク タ が 使わ れ ま す 。new 演算 子 を つけ て function を 呼び 
出す と 、 そ れ は 関数 と し て 実行 きれ る の で は な く 、 オ ブ ジ ェクト を 作成 する た め の コ ンス トラ クタ と し て 動作 し ま 
す 。 そ の コン スト ラク タ に 明示 的 に prototype を 設定 し て お く と 、 を その コン スト ラク タ を 使っ て 作ら れ た オブ ジェ 
クト は 暗 庄 の prototype を 参照 する よう に な る の で す 。 
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コン スト ラク タ を 使っ て 作ら れ た オプ ジェ クト は コン スト ラク タ の prototype を 参照 する 


DrOototyDe 


' rototype 
オブ ジェ クト 1 キヤ デン 


オブ ジェ クト 2 
オブ ジェ クト 3 





具体 例 を 見 て み ま し ょ う 。 


Var myProto = { 
sayHe11o: function () { console.1og("he11o") } を 語 プ ロト タイ プ オ ブ ジ ェクト 





function myOb]ect() { 


を 北 コン スト ラク タ 


myOb]ject.prototype = myProto: e 葉 』 コン スト ラク タ に prototype を 設定 


var a = new myOb]ject(): 
ウオン の 
var b = new myOb]ject() : * 和 オプ ジェ クト の 作成 
a.sayHe11o() : を プロ ト タ イ プ の メソ ッ ド 呼び 出し 
var p9 = Object.getPrototypeOf(a) : < 日 
var pl = Object.getPrototypeOf(Db) : 
var isSame の = (p9 === D1): を p0 と p1 は 同一 (isSSame0 は true) 
Var 1SSame1 = (DO の === myProtO) : ゃ p0 と myProto は 同一 (isSSame1 は true) 


回 の myProto が ブ プロトタイプ オブ ジェ クト で す 。 sayHello と いう メソ ッ ド を ひと つ だ け 持 つ シ ンプ ル な オブ ジェ 
み ト ぞ で す 。 

内 で 定義 きれ て いる 関数 myObject は コン スト ラク タ で す 。 

の |myObjectprototype = myProto」 で 、 myObject オ ブ ジ ェクト の プロ ト タ イ プ を 設定 し て いま す 。 

鐘 に ある よう に 、a と b は myObject の オブ ジェ クト で す 。 

回 で 、 そ れ ぞ れ の プロ ト タ イ プ オ ブ ジ ェクト を 「 ObjectL_getPrototypeOf0」 で 取得 し て いま す 。 

a の 暗黙 の ブ プロトタイプ が p0 で 、b の 暗黙 の プロ ト タ イ プ が p1 と な り ま す 。p0、p1、 myProto と いう 3 つの オ 
ブ ジェ クト が まっ た く 同 じ も の で ある こと が わか り ま す 。 
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プロトタイプ の 例 





ゲー ム プ ログ ラミ ング を し て いる と 、 カ ー ド ゲー ム で カー ド を シャ ッ フ ル し た り 、 地 雪 の 位置 を 変更 し た り と 、 配 
列 の 並び 順 を ラン ダム に し た いと いう 状況 に 出くわす こと が ある で し ょ う 。 残念 な が ら も と も と の 配列 オブ ジェ クト 
Array に その よう な メソ ッ ド は 用 意 き れ て いま せん 。 そ の よう な 場合 に 便利 な メソ ッ ド を 実装 し て み ま し ょ 2 う 。 


く html> 
く <head> 
く SCF1Dt> 


Array.prototype.shuffle = function () { 1 
var ュ = this.length: 
while (1) { 
var ]〕 = Math.floor(Math.random() * 1): 
var t = this[--i]: 
this[i] = this[]j]: 
this[j」 = t: 
J 


return thiSs: 


function shuffle() { 
生前 宮 還 お 導 導電 
cards . shuff1e(): = 
document . getElementById("result").innerText = cards.]o1n(”,"): 
け 
く / SCFr1Dt> 
く /head> 
く body> 
く button onclick="shuffle() ">shuffle</button> 
く D 1d="FeSult "> く /D> 
く /body> 
く /html> 


メソ ッ ド の 中 身 は Fisher-Yates と いう アル ゴリ ズム を 実装 し た も る も の で す が 、 今 は その 内 容 を 理解 し な く て も か ま 
いま せん 。 今 は プロ ト タ イ プ の 理解 を 深め る こと に 集中 し まし ょ う 。 
Array は 配列 型 の コン スト ラク タ で す 。 上 記 の コー ド で は 、 古 で 配列 Array の コン スト ラク タ の prototype 


に shuffle と いう メソ ッ ド を 追加 し て いま す 。 そ うす る こと で 、 すべて の 配列 型 オ ブ ジ ェクト に 対し て shufle メソ ッ ド 


を 呼び 出す こと が 可能 に な り ま す 。 


回 に 
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配列 Array の コン スト ラク タ の prototype に shuffle と いう メソ ッ ド を 追加 


- 還 と nhuffe 義 


オブ ジェ クト 1 TOROODS 
CarOS 
オブ ジェ クト 2 9MDS 





ここ で は 、 記 で cards と いう 配列 を 定義 し て 、 cards.shuffle() と メソ ッ ド を 呼び だ し て いま す 。 そう する と 配列 の 
要素 が ラン ダム に 並べ 替え られ ます 。 も と も と 配列 型 に は shuffle と いう メソ ッ ド は あり ませ ん 。 し か し 、 これ が 動 
作 す る の は 、 cards と いう 配列 型 に shuffle と いう メソ ッ ド は な く て も $、 cards の 暗黙 の prototype 参 照 の 先 に shuffle 
と いう 関数 オブ ジェ クト が 登録 きれ て いる か ら な の で す 。 


3-10 イベ ント 


| JavaScript の プロ グラ ミン グ は イベ ント ハン ドラ を 記述 する こと 」 と いっ て も 週 言 
で は あり ませ ん 。 それ くら い イ ベン ト と イベ ント バハ ンド ラ は 重要 な 位置 を 占め ます 。 こ 
こ で は 、 い ろ い ろ な イベ ント と その イベ ント を 処理 する 方 法 に つい て 説明 し ます 。 


( 3-10-1 | イベ ント 、 イ ベン ト ハ ンド ラ ) 

イベ ント と は 何ら か の 事象 の こと で す 。 人 生 に は 、 誕生 日 、 入 学 式 、 運動 会 、 卒業 式 、 就職 いい っ た さま ざま 
な な イベ ント が あり ます が 、TavaScript に と っ て の イベ ント は 、 文書 が 読み 込ま れ た 、 マ ウス が クリ ッ ク さ れ た 、 
マウ ス が 移動 し た 、 キ ー が 押下 きれ た 、 タイマー の 時 間 が 来 た 、 と いっ た も の で す 。]」avaScript の プロ グラ ミン 
グ と は | イベ ント が 発生 し た と き に どの よう な 処理 を 行う か 記述 する こと ] と いっ て も 過言 で は あり ませ ん 。 そ れ だ 
け に 、 イベ ント に つい て 正しい 理解 を 持つ こと は と て る も 重要 で す 。 


を イベ ント ハン ドラ 





イベ ント が 発生 し た と き に 実行 きれ る 関数 を | イベ ント ハン ドラ 」 と 呼び ます 。 た と えば 、 誕生 日 し いう イベ ント 
に と っ て は 、 誕 生日 パー ティ ー が イベ ント ハン ドラ に 該当 する で し ょ う 。 JavaScript で は | プロ パテ ィ に 関数 を 代 
人 人 する 」 と いう 方 法 で イベ ント ハン ドラ を 設定 し ます 。 言葉 に よる 説明 より も 例 を 見 た ほう が 直感 的 に わか りや す 
いと 思い ます の で 、 早 速 具体 例 を 見 て み ま し ょ う 。 


(3-10-2 | 文書 の 読み 込み イベ ント ) 


NN ポポ ポポ ボネ ネネ ボネ ネ や ポポ ネネ ポポ ポポ や ポポ ポポ ポポ ネネ ボネ や や ポ ネ や ボボ ポ ボド ネネ ネネ ボネ ポポ ボネ ネネ ボボ ネネ ネネ ネネ ボネ ネネ ネギ ポ ネネ ネギ ボボ ドキ ポポ ボボ ポポ ネギ や ポ ボ ボネ ポポ ネネ ボネ や ボボ ネネ ネネ ボネ ネネ ネネ ネネ ボネ ネネ ネネ ネネ ネネ ボネ ボネ ネネ ボネ ネギ ボボ ネギ ボド ネネ ボネ ボド ネネ ネネ ド ネギ ネネ ネネ ネネ ネネ ボボ ネギ ボネ ボド ボネ ボド ボド ボボ ドド ネネ ボネ ボド キキ ネギ ネネ キネ キネ キキ ネネ ボド ギド キキ ボ ボボ ボボ NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNWNWNWNWNW や WW や 


人 生 最 初 の イベ ント が 誕生 で ある よう に 、TavaScript の 最初 の イベ ント は 文書 読み 込み の イベ ント で す 。 こ 
の イベ ント の 処理 方 法 を 見 て み ま し ょ う 。 


単純 な HTML eventload0.html 


く !DOCTYPE html> 
く html> 
く head> 
く <meta charset="UTF-8"> 
く /head> 
く body> 
<h1> こ ん に ち は </h1> 
く /body> 
く /html> 


il 
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フラ ウザ 表示 例 
- 


) 加 ] D:\Book\JavaScript\Eve 


こん に ち は 


イベ ント ハン ドラ の 使用 例 


く !DOCTYPE htm1l> 

く html> 

く head> 
く <meta charset="UTF-8"> 
く SCF1Dt> 

window.onload = init: ee 市 


function init() { 


var h = document.getE]1ementById("title"): 


h.textContent = "は じ め ま し て ": 





く / SCr1Dt> 
く /head> 
く body> 
<h1 id="title"> こ ん に ち は </h1> 
く /Dbody> 
く /html> 


フラ ウザ 表示 例 
- 


き 尋 ] D:\Book\JavaScript\Eve 


は じ め ま し て 





eventload1.html 


瑞 で 、window オブ ジェ クト の onload プロ パテ ィ に イベ ント ハン ドラ init を 登録 し て いま す 。 こ うす る と 、 文書 
の 読み 込み 完了 後に 関数 init が 呼び 出さ れ ま す 。 詳 の イベ ント ハン ドラ 関数 init の 中 で は 、 [id="title" | と い 
う 有 要素 を 取得 し 、 そ の textContent プロ パテ ィ に 文字 列 を 代入 する こと で 表示 を 「 は じ め ま し て 」| に 更新 し て い 


ます 。 ちなみに 、 以 下 の よ うに 無名 関数 を 使う こと も る 可能 で す 。 


window.onload = function () { 


var h = document.getElementById( "title"): 


h.textContent = "は じ め ま し て ": 
3 


eventload2.html 


また 、 以下 の よう に body 要素 の onload 属性 に 記述 し て も る ほぼ 同じ 挙動 (文書 読み 込み 後に 関数 init が 実 
行 さ れる) と な り ま す 。 


<body onload="1nit() "> 


昔 は body 要素 の onload 属性 に イベ ント ハン ドラ を 記述 する の が 一 般 的 で し た が 、 最 近 で は window オブ 
ジェ クト の onload ハン ドラ に 登録 する 手 潜 や 、 以下 の よう に DOMContentLoaded イ ベン ト に ハン ドラ を 登録 す 
る 手法 6 見 受け られ る よう に な り ま し た 。 


eventload3.html 


く !DOCTYPE html> 
く <html> 
く head> 
く <meta charset="UTF-8"> 
く SCF1Dt> 
document . addEventListener('DOMContentLoaded', function () { 
var h = document . getElementById("title"): 
h.textContent = "は じ め ま し て ": 
}) : 
く / SCr1Dt> 
く /head> 
く body> 
<h1 id="title"> ご ん に ち は </h1> 
く /body> 
く /html> 


いずれ も 、 文 書 を 読み 込み 時 の イベ ント を 処理 する る の で す 。 た だ 、 上 茂 密 に いう と window オブ ジェ クト の 
onload と document オブ ジェ クト の DOMContentLoaded イベ ント は 発生 する タイ ミン グ が 異な り ま す 。 


DOMContentLoaded と onload 


DOMContentLoaded onload 
い い 


画像 な どの 読み 込み 
読み 込み 開始 
HTML 文書 の 読み 込み ・ 解 釈 完了 文書 全体 の 読み 込み 完了 





ブラ ウザ は HTML を 読み 込む と 、 先ず 文書 が どの よう な 構造 か を 解釈 を し ます 。 こ の 解釈 が 完了 し た 段階 で 
DOMContentLoaded が 発生 し 、 そ の 後 で 画像 な どの 読み 込み が 行わ れ ま す 。 画像 な どの 読み 込み が すべ て 
完了 し た 時 点 で onload が 発生 し ます 。 実際 に 試し て み ま し ょ う 。 <script> 要素 に 以下 の よう に 記述 し て み ま す 。 


| 
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eventload4.html 


document .addEventListener('DOMContentLoaded', function () { 
console.1og("called: DOMContentLoaded"): 
ます * 


w1ndow.onload = function () { 


console.1og("called: window.on1oad"): 


開発 者 ツー ル の コン ソー ル を 見 て みる と 、 DOMContentLoaded が 先 に 呼び 出 き れ て いる こと が わか り ま す 


デバ ッ カ の コン ソー ル で 確認 





evernt4.html - F12 開発 大 " 1 ー ロロ 學 
DOM Explore ニシ ソー ル デバ ッ ガ ー LEdge 2 ?3 負 皿 
@ 0 ム 1 6 1 | 記 X ター ゲッ ト : _top: event4.html ツン | 
夫 HTML1399 の : ナビ ゲー ショ ン が 発生 し まし た 。 
プ ァ イル : event4 . h 寺 大 1 


Cglled: DOMContentLoaded 
Ca11ed: window .on1oad 


画像 の 読み 込み な ど に 時 間 が か か る ペー ジ で 、 早い 段階 で JavaScript の 処理 を 行い た い 場 合 
DOMContentLoaded を 、 特 に こだわ り が な い 場 合 は 好き Mountn よい で し ょ う 。 


(310-3 ボタ ン の クリ ッ ク ) 


ーー やら ロ の の 上 の の みお の の の の の の の の の の は ら の らら の の び の よら の の の の 必 る のび め ひひ のみ の る の の の の の の の の の の の の の ら の の の の の の の の の の の の の の の の の の らら の の の 全 の の の の の の 違 の る の の の の の の の の あの の の の らら 避 @ の おお る お お ちの ゆび ぶ の の の の の の の の の あの ゆめ の の の の お の の @⑧6⑥ や の の る の 人 ゆ ゆあ ゆす の ゆ ち お ら あゆ の ゆ ああ 宮林 


傘 に ボタ ン を クリ ッ ク し た と き に 発生 する イベ ント ハン ドラ を 見 て み ま し ょ う 。 


mouSeclickO.html 


く !DOCTYPE html> 
く html> 
く head> 
く meta charset="UTF-8"> 
く SCF1Dt> 
window.onload = function 〈() { 
document.getElementById("yes") .onc1ick = yeshand1er: 
document . getElementById( "no") .onc1ick = nohandler: 
J 
function yeshandler(e) { 
document .getElementById("status") .textContent = "は い が 選 ば れ ま し た " 
J 
function nohandler(e) { 
document.getElementById("status") .textContent = "いい え が 選 ば れ ま し た " 


く / SCr1Dt> 
く /head> 
く body> 


<button 1d="yes"> は い </button> に 人 較 


<button id="no"> い い ズ え </button> 
く <h2 1d="status "> く /h2> 

く /body> 

く /html> 


フラ ウサ ザ 表 示例 





き 選 | D:\Book\JavaScript\Event よ き 己 ] D:\Book\JavaScript\Event 


は い が 選 ば れ ま し た いい え が 選 ば れ ま し た 





| は い | | いいえ |」、 ボ タン を 押下 する と 画面 の 表示 が 更新 され ます 。 window.onload で は 、 それ ぞ れ の ボタ 
ン を document.getElementById() で 取得 し 、 そ の onclick プ ロ パ ティ に 専用 の ハン ドラ を 登録 し て いま す 。 そ の 
様子 を 以下 の 図 に 示し ます 。 
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各 ボ タン に ハン ドラ を 登録 


function yeshandler(e) 


function nohandler(e) 


いい え が 選 ば れ ま し た 





この アプ ロー チ で は 、 それ ぞ れ の イベ ント に 専用 の イベ ント ハン ドラ を 割り 当て る の で 直感 的 で わか りや すい と 
思い ます 。 し か し 、 ど ちら の ハン ドラ で も る 同じ よう な 処理 を 行う の で 、 都 度 記述 する の は 無駄 で す よ ね 。 以下 の 
ょ うに すれ ば ひと つの ハン ドラ で 同じ 効果 を 実現 で きま す 。 


window.onload = function () { 
document . getElementById("yes”) .onclick = myhandler: 
document . getElementById("no") .onclick = myhandler: 
ナ 
function myhandler(e) { 
document . getElementById("status”") .textContent = 
e.target.textContent + "が 選ば れ ま し た " 
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function myhandler(e) 


いい え が 選 ば れ ま し た 


な ぜひ と つの ハン ドラ で それ ぞ れ の ボタ ン に 対応 で きた の で し ょ うか ? ここ で 注目 し て ほし い の は 、 
myhandler() の 中 に ある e.target で す 。 変数 es は イベ ント ハン ドラ が 呼び 出さ れる と き の 引 数 で 、 ブ ラウ ザ が 値 
を 設定 し て くれ ます 。 変数 e の target プロ パテ ィ に は イベ ント を 発生 きせ た 要素 、 す な わ ち button 要素 へ の 参 


照 が 格納 され ます 。 つ まり 、 この プロ パテ ィ を みれ ば どの ボタ ン が 押下 され た か が わか る の で す 。 あ と は 、 要素 
の textContent プロ パテ ィ か ら ボ タン の ラベ べ ベル 文 字 列 を 取得 し 、 そ の 内 容 を 設定 し て いま す 。 


(3- 0-4 | イベ ント ハン ドラ の 引数 ) 


の の の の の の の の の の の の で の の の の の の の で の の と の の の の の の の の の の の の の の で の の で の の で で の で の の で の の で の の で の の の の の の る の の の の の の の の の の の の の で の の の の の の の の の の の の で の の の で の の の の の の ひさ の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の の で の や で や や や で やる で や で やや や や で やや で や や で や や やる や や や や や や 人 やや 全 全 全 や 人 全 の 全 全 人 全 や 全 oe 


上 記 で は 


*・ イベ ント ハン ドラ が 呼ば れる と き に は ブラ ウザ が 引数 を セッ ト し て くれ る 
・ その 引数 の target プ ロ パ ティ を みる と イベ ント を 発生 させ た 要素 が わか る 


と 説明 し まし た 。 し か し 、 一 口 に 、 イベ ント と いっ て も 多く の バリ エー ショ ン が あり 、 それぞれ に 付随 する 情報 は 異 
な り ま す 。 た と えば 、 input 要素 で スラ イダ バー が 操作 きれ た と き は 、 値 が 変化 し た 旨 の 情報 が あれ ば 十分 で 
す が 、canvas 要素 な ど で マ ウス が 操作 きれ た の で あれ ば 座標 情報 $ 必 要 と な る で し ょ う 。 少し 実験 を し て み ま 
し まう 。 


eventarg1.html 


く !DOCTYPE html> 
く html> 
く head> 
く SCF1Dt> 
window.onload = function () { 
var nodes = document.getElementsByClassName( "target") : 
for (var 1 = の : + く nodes.1ength : i++) { 
nodes[i] .onclick = myhandler: 
nodes[1i] .onmousedown = myhandler: 
nodes[1] .onmouseup = myhandler: 
nodes[i] .onchange = myhandler: 
nodes[i].onfocus = myhandler: 


function myhandler(e) { 


console.log(e.type + ”: tagName=" + e.srcElement . tagName) : 
console.1og(” clientX=" + e.clientX + " screenX=" + e.ScreenX + " pageX=" + e.DageX) : 
」 
く / SCF1Dt> 
く /head> 
く body> 
<button class="target"> ボ タン </button> 
く 1nDut class="target" tyDe="range "/> 
く <p class="target"> パ ラグ ラフ </p> 
<h3> デ ベロ ッ バ パーツ ー ル (デバ ッ カ ) を 起動 し て コン ソー ル 出 力 を ご 覧 くだ さい </h3> 
く /body> 
く /html> 


フラ ウザ 表示 例 デバ ッ ガ の コン ソー ル 





」 え 
ニシ ソー ル ーー し " Edoi 2 “ に 


A0| 6 | に 】 XX PP の eventarg1.html 


mmOUSedOwn : tagName=BUTTON 
e. て 11ientX=32 e.sceenX=147 e.pageX=32 
focus: て agName=BUTTON 
e. て 11ientX=undefined e.sceenX=undefined e-.pageX=undefined 


等 GY)SGamelestYsample-ver1-t り ・ 〇 穫 GwW)SGameTestWsample-ve.- * 
ファ イル (F) 編集 (E) 表示 (V) お 気に入り A) ツー ル (①) ヘル プ (H) 


| ポタ ン | 1 EE 


バラ グラ フ 


デベ ロッ パー ツー ル ( デ バッ ガ ) を 起動 し て コン ソー ル 出 力 を ご 覧 くだ さい 


OUuUSeUD: tagName=BUTTON 

で . て 11ientX=32 ce.sceenX=147 e.DageX=32 
C11ick: tagName=BUTTON 

e. て 11ientX=32 e.sceenX=147 e.pageX=32 





button 要素 、 input 要素 、 p 要素 に 対し て 、 onclick、 onmousedown、 onmouseup、onchange、onfocus 
と いっ だ イベ ント の ハン ドラ を 設定 し て いま す 。 イ ベン ト ハ ンド ラ myhandler で は 、 引 数 で 与え られ た イベ ント に 
関す る 情報 を コン ツー ル に 出力 し て いま す 。 

初期 化 関数 onload の 中 に document_.getElementsByClassName と いう 見 慣れ な い 命 令 が あり ます 。 こ の 
getElementsByClassName は 、 引 数 で 指定 きれ た クラ ス 名 を 持つ 要素 を まとめ て 返す 関数 で す 。document. 
getElementByld は 引数 で 指定 され た id を 持つ 要素 を 返す 関数 で し た 。 こ れ と 働き は 仏 て いま す 。 た だ 、 id 
は 文書 中 で 同じ 値 を 複数 指定 で きま せん で し た が 、 class 属性 に は 同じ 値 を 割り 当て られ る の で 、 複数 の 要素 
を 抽出 で きま す 。 覚え て お 〈 と 便利 で す 。 

コン ソー ルル 出力 を みる と 、 どの よう な イベ ント が 発生 する か が わか り ま す 。 発生 する 順序 や 内 容 は ブラ ウザ に 
よっ て 守 な り ま す が 、 さ る さまざま な イベ ント が 発生 し て いる こと が 確認 で きま す 。 IE の 場合 は 以下 の よう な イベ ント 
が 発生 し て いま し た 。 


イベ ント の 種類 と 発生 順 


・ ボ タン の 押下 、mouseup ) 


・ ス ライ ダバ ー の 操作 mouseup ) 
・ パ ラグ ラフ の クリ ッ ク 
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ょ た 、 focus、 change と いっ た イベ ント の と き は clientX, screenX, pageX と いっ た マウ ス 座 標 に 関連 する 情報 
が 設定 され て いな い (undefined ) こと も わか り ま す 。 

この よう に イベ ント ハン ドラ に 渡さ れ た 引数 を 参照 する こと で 、 どの 要素 で どの よう な 操作 が 行わ れ た か 、 マウ 
ス の 場合 は どの 座標 で イベ ント が 発生 し た の か 、 と いう こと が わか る よう に な り ま す 。 

と ころ で 、 前 の 例 で は マウ スカ ー ソ ル の 座標 値 を 取得 する た め に 、 clientX, screenX, pageX と いっ た プロ パ 
ティ を 使用 し て いま し た 。 こ れ ら は XX 座標 ( 横 方 向 ) の 値 を 取得 する た め の も の で す が 、Y 座 標 の 値 を 取得 す 
る だ た だめ に clientY, screenY, pageY と いっ た ブロ パテ ィ も 用 意 き れ て いま す 。 で は 、 これ ら の プロ パテ ィ は いっ た だ たい 
何 が 違う の で し ょ うか ? 以下 の 図 を ご 覧 くだ さい 。 


マウ スカ ー ソ ル の 座標 値 





ペー ジ の 原点 pageX/Y 
スク リー ン の 原点 








SCreenX/Y 

ブラ ウザ 領域 の 原点 ーー 財 

ya トー を ー 代 | CyPublicationav の ・ 〇 | 欠 CyPublicatonwjavaScn. 
マー ラペ ーー バン に ビ ソ ラン コケ バケ ラコ まく 

自 要 素 の 原点 

offsetX/Y 

ペー ジ の 範囲 

それ ぞ れ の ブロ パテ ィ は 原点 と する 座標 が 異な り ま す 。 
プロ パテ ィ と 座標 





プロ パテ ィ 座標 
SCreenX/Y 画面 (スク リー ン ) の 左上 を 原点 と する 座標 


ClientX/Y ブラ ウザ 儲 域 の 左上 を 原点 と する 座標 





DageX/Y ペー ジ の 左上 を 原点 と する 座標 (スク ロー ル し て いな いと き は olientX/Y と 同じ 値 ) 
OffsetX/Y イベ ント 発生 元 の 要素 ( 自 要 素 ) の 左上 を 原点 と する 座標 





Canvas で ゲー ム を 実装 する と き は 、 原点 を Canvas の 左上 端 と する offsetX/Y を 使う こと が 多い で し ょ う 。 こ う 
すれ ば Canvas を ペー ジ 上 の どこ に 配置 し て も TavaScript の コー ド を 変更 する 必要 が あり ませ ん 。 し か し 、 


Firefox は 現時 点 に お いて offsetX/Y を サポ ー ト し て いな いよ う で す (http://www.jacklmoore.com/notes/ 
mouSse-DoSsition/ ) 。 そこ で 本 書 で は 以下 の よう な 回 避 策 を 使用 する こと に し まし た 。 た だ し 、 紙面 の 都合 上 、 本 
書 の すべ て の サン プル で この よう な 記載 を し て いる と は 限り ませ ん 。 その 和則 ご 了承 くだ さい 。 


eventarg2.html 


く !DOCTYPE html> 
く html> 
く head> 
く <meta charset="UTF-8"> 
く style> 
pt 
background-color : gray : 
width: 499px: height : 499Dx : 
padding:59px: font-size : 24Dx : 
ナ 
く / style> 
く SCr1Dt> 


window.onload = function () { 


J 


function mymousemove(e) { 


) 


document .getElementByTId( "area") . onmousemove = mymouSemoVe : 


テマ > ユ ひ | 0L-S | 計上 硫 ③G1dIJOSBABT 


document . getElementById("s9") .textContent 
"ClientX=" + e.clientX + ", cl]ientY=" + e.clientY: 

document . getElementById("s1") .textContent 
"DageX=” + e.DageX + ", DageY=" + e.DageY: 

document . getElementById("s2") .textContent = 


"SCreenX=" + e.SCcreenX + ", screenY=" + e.screenY: 
var target = e.target || e.srcElement, 










rect = target.getBoundingClientRect( ) , 
offsetX = e.clientX - rect.]eft, 
offsetY = e.clientY - rect.toD: 
document . getElementById("s3") .textContent = 
"OffsetX=" + offsetX + ", offsetY=" + offsetY: 


く / SCFr1Dt> 


く /head> 
く body> 


<h1> マ ウス イベ ント の プロ パテ ィ イィ </h1> 
く D 1d="area"> 
く <span 1d="s9"></span><br /> 
く Span 1d="S1”> く /sSpan> く Dr /> 
く <span 1d="s2"></ span><br /> 
< く Span 1d="S3"></sSpan> く br /> 


く / D> 
く /body> 
く /html> 
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加 の 部 分 が 今回 の 対処 策 に な り ま す 。 ま ず 、 引数 e の target プロ パテ ィ を 取得 し ます 。 ブ ラウ ザ に よっ て は 
target が な い 場 合 が あり ます が 、 そ の 際 は srcElement プロ パテ ィ で 代用 し ます 。 

あと は 、 getBoundingClientRect で 自分 の 領域 を 求め 、 clientX/Y か ら 自 領域 の 左 rectleft、 上 rect.top の 
差分 を 求め て 、 最終 的 に offsetX と offsetY を 求め ます 。 

少々 内 容 が 難し い の で 現時 点 で は 理解 で き な く て も 大 丈夫 で す 。 た だ 、 イベ ント ハン ドラ の 引数 で 得 ら れる 
座標 値 に は る さま ざま な も の が ある の で 往 意 が 必要 な こと は 覚え て お いて くだ さい 。 

HTML や CSS の 仕様 は W3C な ど で 細 か く 規 定 き され て いま す 。 た だ 、 ブ ラウ ザ に よっ て 対応 状況 も 異な り ま 
すし 、 共 動 に も 違い が あり ます 。 特に イベ ント 回 り は 違い が 大 きい 部 分 で す 。 実際 に は いろ いろ な ブラ ウザ で 
試行 錯誤 し な が ら 、 プ ロ パ ティ や イベ ント を 探し て いく 作業 が 必要 で し ょ う 。 


(3-10-5 | イベ ント ハン ドラ の 登録 先 ) 

ボタ ン を 押し た と き の 処 理 は 、 各 ボタ ン ご と に イベ ント ハン ドラ を 記述 する か 、 複 数 の ボタ ン を まとめ て 処理 
する か 、 場合 に より けり で す 。 例 と し て 、 3 つの カー ド か ら あ た り を ひと つ 当 て る 簡単 な ゲー ム を 紹介 し まし ょ う 。 ま 
ず 、 個 々 の 要素 に イベ ント ハン ドラ を 割り 当て る 方 法 で す 。 


event-scope0.html 


く !DOCTYPE html> 
く html> 
く head> 
く meta charset="UTF-8"> 
く style> 
.Card { 
width: 59Dpx: 
height: 79Dx: 
border: 1px solid blue: 
border-radius: 19Dx: 
text-align: Center: 
font-s1ze: 26DX: 
background-color: white: 
box-shadow: rgb(128, 128, 128) 5px 5px: 
J 
く / style> 
く SCF1Dt> 
var strike = Math.floor(Math.random() * 3): 1] 
window.onload = function () { 
document . getElementById( "card9") .oncl1ick = myhandler9: 
document . getElementById( "card1") .onclick = myhandler1: 


document . getElementById( "card2") .oncl1ick = myhandler2: 
document . getElementById("shuffle").onclick = shuffle: 









function myhandler9(e) { 
1† (Strike == の ) { 
document . getE1ementById( "card9") . textContent 








ナ 
function myhandler1(e) { 

1f (strike == 1) { 
document . getElementById( "card1") .textContent 









J 
function myhandler2(e) { 

1f (strike == 2) { 
document . getElementById( "card2") .textContent 












function shuffle(e) { 
strike = Math.fl1oor(Math. random() ぇ * 3): 

document . getElementById( "card9") .textContent = "": 
document . getElementById( "card1") .textContent = "": 
document . getElementById( "card2") .textContent = 
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く / SCF1Dt> 
く /head> 
く body> 
く d1iV 1d="deck"> 
く table> 
く て て F> 
く td class="card" 1d="card9"> </td> 
く td class="card" 1d="card1"> </td> 
く td class="card" 1d="card2"> </td> 
く /tF> 
く /table> 
< く button 1d="shuffle">Shuff1e</button> 
く /d1V> 
く /body> 
く / html> 


コー ド は 少々 長め で す が 処 理 内 容 は シン プル で す 。 還 の onload で 、 それぞれ の カー ド と ボタ ン に イベ ント ハ 
ンド ラ を 登録 し て いま す 。 
まだ 、 訓 で 当たり カー ド の 番号 (0 一 2) を 乱数 で 生成 し 、 変 数 strike に 設定 し て いま す 。 
還 で は 、 そ れ ぞ れ の イベ ント ハン ドラ に 対し 、 自 分 の カー ド と 当たり 番号 が 同じ だ っ た と き に 「 〇 | を 表示 し 
も も いっ ます 。 
四 の shuffle 関数 は 、 Shuffle ボタ ン が 押下 され た と き の イ ベン ト ハ ンド ラ で 、 乱数 を 設定 し 、 すべ て の カー ド 
14/ 
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を 裏返し に し て いま す 。 


ここ で 、 す べべ て の カー ド 、 Shuffle ボタ ン に 別々 の イベ ント ハン ドラ を 登録 し て いる こと に 注目 し て くだ さい 。 


すべ て の カー ド 、Shuffle ボタ ン に 別々 の イベ ント ハン ドラ を 登録 


myhandlerO myhandler1 myhandler2 


shuffle 一 一 w| Shuffle 





一 方 、 以下 の サン プル は 動作 ほ と し て は まっ た 〈 く 同じ で す が 、 イ ベン ト ハ ンド ラ の 登録 対象 が 異な り ま す 。 


く !DOCTYPE html> 
く html> 
く <head> 
< く meta charset="UTF-8"> 
く style> 
.Card { 
width: 59Dx: 
height: 79Dx: 
border: 1px solid blue: 
border-radius: 19Dx: 
text-align: Center: 
font-s1ze: 26DX: 
background-color: white: 
box-shadow: rgb(128, 128, 128) 5px 5px: 
し 
く / Style> 
く SCr1Dt> 
var strike = Math.floor(Math.random() * 3): 
window.onload = function () { 
document .getElementById( "deck”) .onclick = myhandler: 


function myhandler(e) { 
var card9 = document.getElementById( "card9”): 
var card1 = document.getElementById( "card1”): 
var card2 = document.getElementById( "card2"): 
var shuffle = document .getElementById("shuffle"): 


event-sScope1.html 


1† (e.target == shuffle) { 
strike = Math.floor(Math. random() * 3): 
card9.textContent = "": 3 
card1 .textContent = "": 
card2.textContent = "": 

。 

1f (e.target == card9 && strike == 9 | 
e.target == card1 && strike == 1 || 
e.target == card2 && strike == 2) { 
e.target.textContent = " 〇 " 


ナ 
く / SCF1Dt> 
く /head> 
く body> 
く d1vV 1d="deck"> 
く table> 
く tF> 
く td class="card" 1d="card9"> く /td> 
く td class="card" 1d="card1"> く /td> 
く td class="card" 1d="card2"> く /td> 
く / て tr> 
く /table> 
く button 1d="shuffle">Shuff]1e</button> 
く /d1V> 
く /body> 
く /html> 
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イベ ント ハン ドラ は div 要素 に ひと つ 登 録 し て いる だ け で す 古 。 イ メー ジ を 以下 に 示し ます 。 イ ベン ト ハ ンド 
ラ myhandler の 中 で は 、 イベ ント を 発生 し た 要素 e.target に 応じ て 処理 を 切り 分 け て いま す 。 


イベ ント ハン ドラ は div 要素 に ひと つた だ たけ 登録 


10="deck "> 


ーー myhandler 





この よう に 、 同 じ 目 的 を 達成 する に し て も いろ いろ な 方 法 が ある こと が わか り ま す 。 ど ちら が よい 悪い と いう 問題 


で は な く 〈、 状 況 に 応じ て 使い 分 けら れる よう に な る の が 理想 だ と 思い ます 。 149 
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イベ ント の 通知 


先 の 例 で は 、 親 要素 で まとめ て イベ ント を 受信 し まし た が 、TavaScript で は 、 子 要素 一 親 要素 、 親 要素 一 
子 要 素 の どちら の 順番 で イベ ント が 通知 きれ て いく 〈 の か を 制御 する こと が で きま す 。 


イベ ント の 通知 


く table> く Dbutton> く table> < く button> 


く <td> < く td> く td> く td> く td> く td> 


NN 





今回 は 、 以 下 の よ うに イベ ント ハン ドラ を 登録 し まし た 。 


document . getElementById("deck") .onclick = myhandler: 


この 場合 は 、 上 左 図 に 玉 さ れる よう に 、 子 有 要素 一 親 要素 の 順番 に イベ ント が 通知 きれ て いき ます 。 泡 が の 
ぼっ て いく 〈 よ うに も 見 える の で Event Bubblng と も 呼ば れ ま す 。 

一 方 、 親 要 素 か ら 順 番 に 要素 まで イベ ント が 通知 きれ て いく 様子 を Capturing と 呼び ます 。 こ の 順番 に イベ 
ント を 処理 し た い 場 合 は 、 


elements[i] .addEventListener("click", myhandler, true) : 


の よう に 記述 し ます 。 た だ 、Bubblmg/Capturmg は すべ て の ブラ ウザ が 対応 し て いる と は 限り ませ ん 。 ど ちら 
の 順番 で 通知 が 行わ れ た と し て も 動作 する よう な 作り に し て お く ほ う が よ いで し ょ う 。 


INIOIITIIE| BuDDling, Capturing の 動作 確認 用 に event-Scopeg.html を 用 意 し まし た 。 興味 の ある 方 
は 中 身 を ご 覧 くだ さい 、。 


event-Scope2.html 


( 3-10-6 | タッ チイ ベン ト に 関し て ) 1 
タブ レッ ト や スマ ー ト フォ ン の 場合 、 マ ウス や キー ボー ド で は な く 〈 く タッ チ を 使用 し ます 。 本書 で も タッ チ を 意識 し う 
て サン プル を 作成 し まし た が 、 ブ ラウ ザ に よっ て 挙動 に ば ら つ き が あり 、 すべ て の ブラ ウザ に 対応 する こと は 困 
上 董 で し た 。 読者 が で きる 限り コー ド を 改変 せ ず に 、 多く の OS/ ブ ラウ ザ に 対応 で きる よう に し まし た が 、 すべ て の 
OS/ ブ ラウ ザ に 対応 し て いる わけ で は な い 旨 ご 了承 くだ さい 。 
| マウ スポ イン タ を 指 に 置き 換え る だ け だ か ら 簡 単 な の で は ?」| と 思う 方 ちあ いる か も し れ ま せん 。 し か し な が ら 、 
以下 の よう な 事項 を 考え る と 、 一 筋 縄 で は いか な いこ と が わか る と 思い ます 。 


・ マウ スク リッ ク は 1 点 の み だ が タッ チ は 指 の 数 だ け 接 点 が あり 、 それ を 考慮 する 必要 が ある 

・ 2 本 の 指 で ズー ム や 回 転 を 行う ジェ スチ ャ ー と いう 操作 も 考慮 する 必要 が ある 

・ タッ チ デ バイ ス は 急速 に 普及 し た の で 標準 化 が 追い つい て いな い 、 も し く は ブラ ウザ の 実装 が 追い つい て い 
な い 


この よう な 状況 な の で 、 ど の ブラ ウザ で も 同じ よう に 動作 する に は まだ し ば らく 時 間 が か か り そ う で す 。 た だ し 、 
どう し て も タッ チ を サポ ー ト し た い 場 合 は 、 特定 の ブラ ウザ 、 OS に 特 化し た 実装 に すれ ば それ ほど 難し いも の で 
も あり ませ ん 。 

本 書 の 後半 で は ゲー ム の 内 容 に つい て 解説 し て いま す が 、 本 書 に お ける タッ チ へ の 対応 方 法 に つい て 以下 
に 説明 し ます 。 


ァ マ > ユ | 0L-e | 対 陣 1dIJOSBAPT < 


・ | #canvas {| touch-action: none:j」 の よう に タッ チ 対 象 の 要素 に touch-action プロ パテ ィ を 設定 し 、 デ 
フォ ルト の タッ チ ジ ェ ス チャ ー 操 作 を 無効 に する 
・ マウ ス の イベ ント ハン ドラ に 加え 、 タ ッ チ 用 の イベ ント ハン ドラ も 追加 する 。 


CanVaS . OnmOuSedown = mymouSedown : 
CanVaS . OnmOUSemOVe = mymOuSemOVe : 
CanVaS . OnmOUSeGUD ニニ ymOuSeUD : 

canvas . addEventListener( touchstart , mymousedown) : 
canvas . addEventListener( touchmove , mymouSsemoVe) : 
canvas . addEventListener( touchend , mymouseuD) : 


これ ら の イベ ント ハン ドラ の 中 で は 、 イベ ント の 種類 に 応じ て 利用 で きる プロ パテ ィ が 異な る た め 、 以 下 の よ う 
に プロ パテ ィ が 取得 で き な か っ た 場合 の バッ クア ッ プ も 指定 し ます 。 ち な み に touches は タッ チ し て いる 上 の 配 
中 で す 。 


function mymousedown(evt) { 
Var mouseX = !isNaN(e.offsetX) ? e.offsetX : e.touches[9] .c1ientX: 
Var mouseY = !isNaN(e.offsetY) ? e.offsetY : e.touches[9] .c1ientY: 
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isNaN() は 引数 が 数 字 で な いか 否 か を 調べ る 関数 で す 。「Is Not A Number」 と いう 英語 が 関数 名 の 由 
来 で す 。 仮 に マウ ス で 操作 し て いる 場合 で あれ ば 、 e.offsetX に 数 値 が 格納 され て いる は ず で す 。 を その 場合 は 
| isNaN(e.offsetX)] が true に な る の で eoffsetX の 値 を 返し ます 。 数 値 で な い 場合 は タッ チ 操 作 が 行わ れ た 
と し て 、e.toucheslOlclientX の 値 を 返し て いま す 。 

Windows10 の Chrome で 試し た と ころ touchend の コー ル バ ッ ク で は 接点 の 数 が 0 に な る た めか evt.touches 
が 空 の 配列 に な っ て いま し た 。 この よう な 人 苦 動 も 正しく 認 識 し た う ぇ で 使用 する 必要 が ある こと に 注意 し て くだ さい 。 

また 、 この 方 法 は あく (まで も 暫定 的 な も の で あり 、 す べ て の ブラ ウザ で の 動作 を 保証 する る の で は あり ませ ん 。 
現在 の 状況 を 見 る と 、 ブ プラ ウザ の 対応 状況 を JavaScript か ら 調べ て それ に 応じ て 適切 な 処理 を 行う 、 もしくは 
を の よう な 差異 を 吸収 し て くれ る ライ ブラ リ を 使用 する の が 妥当 な アプ ロー チ と な る で し ょ 2 う 。 





3-| | 関数 オフ ジェ クト 


本 章 の 最後 は 関数 オブ ジェ クト で す 。 関 数 を モノ と し て 扱 つ 方法 に つい て 競 強 し ま 
す 。 直観 的 で は な いた め 最 初 は 違和感 を 覚え る か も し れ ま せん が 、 ワ ン ラ ンク 上 を 
目指 す に は 必須 の テク ニッ ク で す 。 


(11-1 | 関数 は オブ ジェ クト ) 


実は 、]avaScript で は 関数 も オブ ジェ クト で す 。 こう 聞く と 違和感 を 覚え を る か も し れ ま せん 。 | JavaScript の 
関数 は 、 何かしら 決ま っ た 処理 を 行う % の で し ょ ? 何で これ が オブ ジェ クト な の 中 そう 感じ る の は 目 然 な 反応 だ 
と 思い ます 。 た だ 、 avaScript で ワン ラン ク 上 を 目指 す の で あれ ば 関数 オブ ジェ クト は 避け て 通れ ませ ん 。 本 
節 の 目的 は “関数 = オブ ジェ クト と いう 感覚 に 慣れ て いた だ く 〈 く こと で す 。 

まず は 、 身近 な 例 を 使っ て 説明 し て み ま し ょ う 。 料理 の レン シン ピ を 考え て みて くだ さい 。 

レシ ピ と は 、「 ど ん な 材料 を 用 意 し て 、 どん な 手順 で 調理 すれ ば 、 ど ん な 料理 が 完成 する か 記載 し た も の 」 
で す 。 レシピ で あれ ば 見 た り 触 っ た り で きる の で オブ ジェ クト (モノ ) っ ぽい で す よ ね 。 

で は 、 関 数 を こん な ふう に 考え て みて くだ さい 。 関数 し は 、「 ど ん な 引数 を 受領 し て 、 ど ん な 手順 で 処理 すれ 
ば 、 ど ん な 出力 が 得 ら れる か 記述 し た も の 」 で す 。 レ シ ピ と 対比 する と 少し は 関数 も オプ ジェ クト (モノ ) っ ぱく 
感じ られ る の で は な いで し ょ うか ? 

実際 に 、 ]avaScript で は 「 関数 は 処理 手順 を 定義 し た オブ ジェ クト (モノ ) | と し て 扱わ れ ま す 。 オブ ジェ 
クト な の で 変数 に 代入 し た り 、 引 数 と し て 別 の 関数 に 渡し た りす る こと も で きま す 。 関数 オプ ジェ クト が は か の オ 
ブ ジェ クト や 変数 と 大 きく 異な な の は 「0」 を 後ろ に つけ る こと で 実行 で きる こと で す 。 


funcobjO.html 












function add(a, b) { 
return a + b: 

ナ 

function mul(a, b) { 

return ax b: 


var calculator = add: 
var X = Calculator(2, 3): // x=5 
calculator = mul: 





に 


に 


var y = calculator(2, 3): // y=6 





呈 で ふた つの 関数 add, mul を 宣言 し て いま す 。 関数 は オブ ジェ クト な の で 変数 に 代 人 する こと が で きま す 。 
まず 詞 で add を 変数 calculator に 代入 し 、calculator に 「(2 3) 」 と つけ る こと で 関数 を 実行 し て いま す 。 こ れ 
に より add が 実行 きれ 、x に は 5 が 代入 きれ ます 。 


回 MM 国 
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次 に 思 で calculator に mul を 代入 し て 、 同 様 に 実行 する と 、 今 度 は mul が 実行 され 、y に は 6 が 格納 され 
ます 。 
以下 の よう に 、 関 数 の 宣言 と 変数 へ の 代入 を 同時 に 行う こと も 可能 で す 。 
funcobj0.html 
var calculator = function (a, b) { 


return a / b: 


J 


Var z = calculator(3, 2): // z=1 .5 


上 記 は 割り 算 を 実行 する 関数 で す が 、 関数 名 は 明示 的 に 記述 し て いま せん 。 こ の よう に 関数 名 を 明示 的 に 
指定 し な いも の を | 無名 関数 オブ ジェ クト | と 呼び ます 。 ちな み に 、 「var calculator = function div(a. b) !… | 
の よう に 関数 名 を 明示 的 に 記述 し て も 問題 は あり ませ ん 。 

邊 名 関数 は オブ ジェ クト の メソ ッ ド を 定義 する と き に よく 使わ れ ま す 。 


funcobj0.html 


function Person(name, energy) { 
this.name = name: 
this.energy = energy: 
this.run = function () { this.energy -= 19: } 
this.sayHello = function () { console.1og("Hi! " + this.name): } 


var p= new Person("Tanaka", 199) : 
D.run() : // energy が 99 に 減る 
p.sayHel1o():  // console に "Hi! Tanaka" と 表示 され る 


関数 Person は コン スト ラク タ で 、 Person ク ラス の オブ ジェ クト を 作成 する た め に 使用 きれ ます 。 こ の Person 
クラ ス に は 、name( 文字 列 ) 、energy( 数 値 )、 run( 関 数 )、 sayHello( 関数 ) と いっ た プロ パテ ィ が 登録 きれ て い 
ます 。 言語 に よっ て は 、 メ ン バ 変 数 (文字 列 ・ 数 値 ・ オ ブ ジ ェクト な どの 値 ) と 、 メ ソ ッ ド (関数 ) を 明確 に 区 
別 す る も の も あり ます が 、 avaScript で は 、 どちら も 同じ プロ パテ ィ で す 。 を る を の 参照 先 が 、 数 値 や 文字 と いっ た 変 
人 勾 で あれ ば メン バ 変 数 に な り 、 参 照 先 が 関 数 オブ ジェ クト で あれ ば メソ ッ ド に な る と いっ た 違い で し か あり ませ 
ん 。 
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参照 先 が 数 値 や 文字 で あれ ば メン バ 変 数 、 関 数 オブ ジェ クト で あれ ば メソ ッ ド 






Person オブ ジェ クト 


"Tanaka" 


関数 を 変数 に 格納 し た り 、 プ ロ パ ティ と し て 宣言 し た り 、 と いっ た 特徴 は 文字 列 や 数 値 と まっ た 〈 同 じ で す 。 
[関数 $ 単 な る オブ ジェ クト に 過ぎ な い 」 と いう 考え 方 に も 慣れ て きた の で は な いで し ょ うか ? そう で な い 人 は | 関 
数 は オブ ジェ クト (モノ ) で ある 」 と 何 度 か 自分 に 言い 聞か せま し ょ う 。 今 の 時 点 で は 違和感 が あっ た と し て も 、 
その うち 慣れ る の で 安心 し て くだ さい 。 


関数 を オブ ジェ クト に し て 扱う 理由 

と ころ で 、「 関数 を オブ ジェ クト に し て 何 が 嬉し い の ?」] 「 何 の た め に 変数 に 代入 する 必要 が ある の 」 と 生 然 
と し な い 人 も 多い の で は な いで し ょ うか 。 こ こ で 、 関 数 を オブ ジェ クト に し て 扱う と いう 理由 に つい て 考え て み ま し ょ 
う 。 

例 を 使っ て 説明 し まし ょ う 。 携帯 ゲー ム 機 を 想像 し て くだ きい 。 携帯 ゲー ム 機 で は カー トリ ッ ジ や メモ リカ ー ド 
を 挿入 し て 遊び ます 。 カ ー ト リッ ジ に は どん な 処理 を 行う か が 記録 きれ て いま す が 、 カ ー ト リッ ジ だ け で は まっ た く 
役に立ち ませ ん 。 実行 する 本 体 が あっ て 初め て 価値 が ある の で す 。 カー トリ ッ ジ を 差し 替え れ ば 別 の ゲー ム $ も 
遊べ ます 。 

関数 オブ ジェ クト は カー トリ ッ ジ や メモ リカ ー ド に 相当 し ます 。 関数 オプ ジェ クト に は どん な 処理 を 行う か が 記 
述 さ れ て いま す が 、 関 数 オブ ジェ クト 単体 で は まっ た く 〈 役 に 立ち ませ ん 。 そ れ を 利用 する 呼び 出し 側が あっ て 初 
め て 意味 が ある の で す 。 関数 オブ ジェ クト を 別 の オブ ジェ クト に 取り 換え る と まっ た 〈 く 違う 処理 を 実行 で きる よう に 
な り ま す 。 

この よう に 関数 オブ ジェ クト の 存在 意義 を 理解 する た め に は 、 関 数 オブ ジェ クト 単体 で は な 〈、 呼び 出し 側 と 
の ペア で 考え る こと が ポイ ント で す 。 


(11-2 関数 オブ ジェ クト に よる 配列 の 操作 ) 
関数 オプ ジェ クト の 習得 は 場数 を こなし て 慣れ る の が 一 番 で す 。 配 列 の 要素 すべ て を 合計 する 処理 を 考え 
て み ま し ょ う 5。 for 文 を 使う と 以下 の よう に な り ま す 。 


回 回 回 
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Va Ga も ta = 1 6。 3 人 4 3、 2。 6。.8。 5. 9. 9@]・ 

var total = 9 の: 

for (vari= の 9 : i<data.1ength : i++) { 
total += V: 


関数 オプ ジェ クト を 使う っ と より シン プル に 記述 で きま す 。 


var data = 1 6。3。4。3。2。 6, 8。5。9, 9]: ゃ e 還 
var total] = 9 の : 
data.forEach(function (v) { total += v })): ee 

2 


四 の | function (V) 1 total オ =v1| の 部 分 が 関数 オブ ジェ クト で す 。 ど ちら も total の 値 は 同じ に な り ま す 。 

回 の data は Array オブ ジェ クト (配列 ) な の で 、data に 対し て Array オブ ジェ クト の メソ ッ ド を 呼び 出す こ 
と が で きま す 。 

回 の forEach は Array オブ ジェ クト の メソ ッ ド の ひと つ で 、 配列 の 要素 を 順番 に 取り 出し 、 を の 値 を 引 雪 と し 
て 関数 オブ ジェ クト を 実行 し ます 。 こ の 例 で は 、 


・ datalU] は 1 中 function (1) { tota1 += 11 
・ datal1] は 6 叶 function (6) { tota1] += 6} 
・ datal2] は 3 叶 function (3) { tota1] += 3} 


の よう に 関数 オブ ジェ クト が 順番 に 実行 され 、 合計 値 total を 求め て いま す 。 
関数 オブ ジェ クト の 部 分 を 書き 換え る と 、 別 の 処理 が 行え を ます 。 た と えば 、 


data.forEach(function (v) { tota] *= v }): 
と すれ ば 、 すべ て の 有 要素 を 掛け 合わ せ た 数 値 が 得 ら れ ま す 。 ち な み に 、 以下 の よう に 記述 する こと も 可能 で す 。 


var adder = function (v) { tota1] += vy }: 
data.forEach(adder): 


関数 オブ ジェ クト を 変数 adder に 格納 し 、 そ れ を forEach に 渡し て いま す 。 処理 は まっ た く 同 じ で す 。 
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別 の 例 を 見 て み ま し ょ う 。 あ る 配列 か ら 偶数 の み を 取り 出す 処理 を 考え て み ま す 。for 文 を 使っ て 書く と 、 た と 
えば 以下 の よう に な り ま す 。 


層間 痢 も あす あき 導き あう 括 う と) 全 / 電 お お 
Var result =[]: 
for (var i = の : i く data.length : ++) { 
1f (datali] % 2 == の @) { 
result.push(data[i] ) : 


これ を 関数 オブ ジェ クト で 書き 直す と 以下 の よう に な り ま す 。 


吉本 給 作 共生 全音: 
var result = data.filter(function (v) { return v%2== の )): 


回 の |function (vV) 】 return v % 2 == 0 1 の 部 分 が 関数 オブ ジェ クト で す 。 fiter メソ ッ ド $forEach と 
同じ く Array オブ ジェ クト の メソ ッ ド で 、 配列 の 各 要 素 を と り だ し 、 それ を 引数 と し て 関数 オブ ジェ クト を 実行 し ま 
す 。 た だ 、 forEach と 異な る の は 、 最終 的 に 、 関数 オブ ジェ クト が true を 返し た 要素 の み を 含む 配列 を 返す こ 
な す 

た と えば 、v に 4 が 渡る きれ た と き は |4 % 2 == 0」 が true と な る ため 、4 は result に 含ま れ ま す 。 一 方 、v に 
5 が 渡さ れ た と き は 「5 % 2 == 0] は false と な る た め 、5 は result に 人 入 ま れ な く な り ま す 。 つま り 、| jreturn vV 
% 2 == 0!」 と いっ た 条件 を 満た す 有 要素 だ け を 抽出 する こと が で きる の で す 。 


(3-11-3 関数 オブ ジェ クト を 引数 に と る Array の メソ ッ ド ) 


ボボ ポポ ボネ ボボ ネネ ボネ ポポ ボボ ポポ ポポ ボネ ボネ ボネ ネネ ボネ ポポ ボネ ボネ ネネ ネネ ネギ ネギ ボボ ギド ギド ドド ドド PP PP PP 


[3.8-3 Array オブ ジェ クト | (P.123) で は Array オブ ジェ クト の メソ ッ ド に つい て 説明 し まし た が 、 最近 の 仕 
様 改 定 で Array オ ブ ジ ェクト に 便利 な メソ ッ ド が 追加 され まし た 。 を その 多く が 関数 オブ ジェ クト を 効果 的 に 活用 
する も の な の で 、 ここ で まとめ て 紹介 し て お きま す 。forEach、 提 ter に つい て は すでに 中 体 例 を 示し まし た が 、 復 
習 も か ね て も う 一 度 説明 し ます 。 


Array.pDrototype.forEach ( 関数 オブ ジェ クト ) 
配列 の 各 要 素 に 対し て 関数 オブ ジェ クト を 呼び 出し ます 。 


PT 問 村 
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VA ata = ニキ 2、 5 4、 7 1 も 1、 
data.forEach(function (e, 1) { 
console.1og("["+ ュ + ィ リ "] ミ "+ ォ e): 


ます 


コン ツ ソール 出 力 は 次 の よう に な り ま す 。 配列 の 個々 の 要素 に つい て 関数 オブ ジェ クト が 呼び 出さ きれ て いる こと 
が わか り ま す 。 


[9]=2 
[1]=5 
[2]=4 
[3]=7 
[4]=1 
[5」=6 


慣れ 親しん だ for 文 で も 同じ 処理 が 可能 で す 。 


for (var i = の : ji< く data.length : i++) て { 
console.1og("[" + エ + "]=" + data[i])・ 


た だ 、forEach と for 文 で は 厳密 に いう と 挙動 が 若干 異な り ま す 。 配列 の 一 部 要素 を delete 命令 で 削除 し 
た 後 で 、 実行 し て み ま す 。 


forEach 文 


var data = [2, 5, 4, 7, 1, 6]: 

delete data[3]: ゃ 3 番目 の 要素 「7」 を 削除 

data.forEach(function (e, 1) { 
console.1og("[ + ュ エ + "]="+ ォ e): 


}): 


コン ソー ル の 出力 


[9]=2 
[1]=5 
[2]=4 
[4]=1 
[5]=6 


for 文 


導 た っ: 電 作 も 信和 

delete data[3]: ゃ 3 番目 の 要素 「7」 を 削除 

for (var 1 = の : 1i< く data.length : 1++) { 3 
console.log("["+ ェ ュ + "]=" + data[i]): 


コン ソー ル の 出力 
[9」=2 
[1」=5 
[2」=4 
[3]=undefined 
[4」=1 
[5」=6 


forEach を 使っ た 方 法 の 場合 、 削除 し た 要素 に つい て 関数 オブ ジェ クト は 実行 きれ ませ ん 。 一 方 、 for 文 は 
要素 の 有無 は お か まい な し で 順番 に アク セス し て いき ます 。 処理 速度 6 若干 違う よう で す が 、 これ は ブラ ウザ の 
実装 に よっ て 変わ っ て 〈 る の で 優劣 は つけ 難い と 思い ます 。 ど ちら か 好き な ほう を 使え ば よい で し ょ う 。 
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Array.prototype.every ( 関数 オブ ジェ クト ) 

配列 の すべ て の 要素 が ある 条件 を 満た し て いる と き に true を 返し 、 ひ と つ で も 条件 を 満た さ な い 場 合 は false 
を 返し ます 。forEach と 同様 に 、 配列 の 個々 の 要素 に 対し て 関数 オブ ジェ クト が 呼び 出さ れ ま す 。 こ の 関数 オ 
ブ ジェ クト で | 条件 を 満た し て いる 場合 に true を 、 満 た し て いな い 場 合 に false を 返す 」 よう に 記述 し ます 。 
every メソッド は 個々 の 有 要素 を も チェック し て いる と き に 、 条 件 を 満た る な いも の が 見 つか っ た 場合 、 た だ ち に 処 
理 を 中 断 し て false を 返し ます 。 


Va た GA も 和え すみ お すもも おれ 


var r9 = data.every(function (e) { return e < 6 }): // r9 = false 
var r1 = data.every(function (e) { return e く 19 })): // r1 = true 
var r2 = data.every(function (e) { return e > の })): // r2 = true 


最初 の 例 で は 、 要 素 7 が 6 より 大 きく 〈、|「e < 6| が false に な る た め 、 メ ソ ッ ド の 戻り 値 r0 も false と な り ま す 。 
2 番目 の 例 は 、 どの 要素 $10 よ り 小 きい の で true が 、3 番目 の 例 は 、 どの 要素 $0 よ り 大 きい の で true が 返さ れ 
ます 。 


Array.Drototype.Some ( 関数 オブ ジェ クト ) 
every と は 対照 的 に 、 どれ か ひと つ で も 有 要素 が 条件 を 満た し て いる と き に true を 返し 、 す べ て の 要素 が 条件 
を 潤 0 た さ な い 場合 に false を 返し ます 。forEach と 同様 に 、 配 列 の 個々 の 要素 に 対し て 関数 オブ ジェ クト が 呼 
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び 出 され ます 。 こ の 関数 オブ ジェ クト で | 条件 を 満た し て いる 場合 に true を 、 満た し て いな い 場 合 に false を 返 
す 」] よう に 記述 し ます 。some メソ ッ ド は 個々 の 要素 を チェ ッ ク し て いる と き に 、 ど れ か 1 つ で も 条件 を 満た する の 
が 見 つか っ た 場合 、 た だ ち に 処理 を 中 断 し て true を 返し ます 。 


var data = [2, 5。4, 7。1,。 6]: 


var r の 9 = data.some(function (e) { return e<6 )})): // r9 = true 
var r1 = data.some(function (e) { return e > 7 })): // r1 = false 
var r2 = data.some(function (e) { return e > 6 }): // r2 = true 


取 初 の 例 で は 、 先頭 の 要素 2 は 6 より も 小さ きく 、「e < く 6| が true に な る た め 、 メ ソ ッ ド の 戻り 値 r0 も 8true と な 
り ま す 。 2 番目 の 例 は 、 7 より も 大 きい 要素 は な いた め false が 、 3 番目 の 例 は 、「e > 6| を 満た す 要 素 7 が 存 
在 す る た め 、true が 返さ れ ま す 。 


Array.Dprototype.filter ( 関数 オブ ジェ クト ) 


条件 を 満た す 有 要素 の み を 含む 新しい 配列 を 返し ます 。 配列 の 要素 ご と に 関数 オブ ジェ クト を 呼び 出し 、 こ 
の 関数 オブ ジェ クト が true を 返し た 要素 の み が 新 し い 配 列 に 含ま れ ま す 。 


var data = [2。5。4。7,。 1 6]・ 


var r の 9 = data.filter(function (e) { return e%2==9@)}): // r の 9 = [2,4,6] 
var r1 = data.filter(function (e) { return e%2== 1 )})): 人 兵 し の 引 
var r2 = data.filter(function (e) { return e <= 4 }): // r2 = [2,4,1] 


最初 の 例 で は 、「e % 2 == 0」 を 満た す の は 偶数 だ け な の で 、 結果 と し て 得 ら れる 配列 は [[24.6] | と な り 5 
ます 。 次 の 例 は 逆 に 奇数 だ けが 条件 を 満た す の で 、 結 果 と し て 得 ら れる 配列 は 「[5.7.1]| と な り ま す 。 3 番目 
の 例 で は 、|e <= 4| を 満た する も の 、 すなわち 4 以下 の 要素 か ら な る 配列 「[[24.11| が 結果 と し て 返さ れ ま す 。 


Array.Drototype.Sort( 比較 用 の 関数 オブ ジェ クト ) 

Array ク ラス に は 、 その 設計 当初 か ら 要 素 を 並べ 替え る た め の sort メ ソ ッ ド が 用 意 き れ て いま す 。 言語 を 設 
計 し た 人 が 並べ 替え 用 の メソ ッ ド を 事前 に 準備 し て くれ て いる の は 非常 に あり が た いこ と で す 。 も し 用 意 さ れ て 
いな か っ たら 、 ク イッ クソ ー ト 、 バ ブル ソート な ど を 使っ て 並べ 替え 用 の 処理 を 自分 で 実装 し な く て は な り ま せん 。 
し か し な が ら 、 以 下 の よ うな 疑問 が 出 て くる と 思い ます 。 

言語 を 設計 し た 人 は 、 私 が どの よう に 並べ 替え た い の か (昇順 、 降順 、 文 字 列 、 数 値 …) 事前 に 知る こ 
と は で き な い は ず だ 。 で は 、 ど うし て 事前 に 設計 する こと が で きた の だ ろう か ?」 と いう 疑問 で す 。 
の る 月 


・ どの よう な 規則 に 基づい て 並べ 替え る の か ? (降順 、 昇 順 ) 
・ 配列 の 要素 に は 何 が 含ま れ て いる の か ? (文字 列 、 数 値 、 オ ブ ジ ェクト ) 


と いっ た こと は コン テン ツ を 作る 人 が 決め る こと で あっ て 、TavaScript を 設計 する 人 は 知る こと が で き な い は ず な 
の で す 。 そ れ で も 、sort メ ソ ッ ド が 用 意 き れ て いる の で す 。 矛盾 し て いる よう に は 思い ませ ん か ? その 答え は も う 
お 気づき で すね 。 関数 オブ ジェ クト の 出番 で す 。 

Array の sort に 渡す 関数 オブ プ ジ ェ クト は 何で も よい と いう わけ で は あり ませ ん 。 以下 の ルー ル を 満た す 関 数 
オブ ジェ クト を 渡す 必要 が あり ます 。 


・ 引数 を 2 個 (a と b) を 受け 取る 
・ ョ …b の 順に 並べ る 場合 、0 より 小さ い 値 を 返す 
・ bー-a の 順に 並べ る 場合 、0 より 大 きい 値 を 返す 


と いう ルー ル を 満た す 必 要 が あり ます 。 

Array ク ラス の sort メ ソ ッ ド を 実行 する と 、 配列 に 含ま れる 要素 の 数 に 応じ て 、 自分 の 作成 し た 関数 オブ ジェ 
クト が 繰り 返し 呼び 出さ れ ま す 。sort メ ソン ッ ド は その 結果 を も と に 並べ 替え を 行っ て て くれ ます 。 プロ グラ マ は 「 ふ 
た つの 要素 を 引数 と し て 受け 取っ て 、 どちら が 前 に 来る か 指示 する だ け の 関数 オブ ジェ クト を 用 意 す る だ け | 
で よい の で す 。 目 分 で ソー ト の アル ゴリ ズム を 実装 する より も ずっ と 楽 な は ず で す 。 

説明 を 読む より も 、 実 行 し て みる ほう が わか りや すい で し ょ う 。 以下 の 例 を ご 覧 くだ さい 。 


// 例 1 

var data = [1, 8, 9, 6, 3, 4, 9, 2]: 
data.sort(function (a, b) treturn a - b:})) 
ニチ 2 も 入ら まとっ 瘍 っ 還 ひっ 本 


// 例 2 
data.sort(function (a, b) { return b - a: }) 
リート 本 7 0 7 と ト e 才 に ミ 


// 例 3 
function mysort(a, b) { 
Feturn a - b: 


J 
data. Sort(mySort) : 
0 も 2 プア も 本 も キ 、 2 さき 。 導 な 衝 』 


例 1 は 昇順 の 場合 で す 。a が b よ り も 小さ い 場 合 、a は b よ り も 前 に 並ん で ほし い の で マイ ナス を 返す 必要 が 
あり ます 。 そこ で 、|a-b」 の 結果 を 返し て いま す 。 

例 2 は 隆 順 の 場合 で す 。 逆 の 順番 で 並べ た い の で 「b-al| を 返し て いま す 。 

例 3 は 例 1 の 別 の 書き 方 で す 。 例 1 の よう に 無名 関数 を 使っ て も よい で すし 、 例 3 の よう に 関数 名 を 明示 的 に 
指定 する こと も 可能 で す 。 

ほか に も る 例 を 見 て み ま し ょ う 。 文字 列 の 長き 順に 並べ る 例 で す 。 


回 回 四国 
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var data = ["hi"。 "hello",。 "say"。 "yes!"]: 
data.Sort(function (a, b) { return a.length - b.length: }) 
data: // hi, say, yes!, hello 


配列 の 中 身 が 独 目 オブ ジェ クト の 場合 で す 。 比 較 関 数 の 中 で は 、 オ ブ ジ ェクト の age プロ パテ ィ の 値 を 比較 


し て いま す 。 こ れ に より 、 年齢 が 若い 順に オブ ジェ クト が ソー ト さ れ ま す 。 


var data = [ 
{ name: "Joe", age: 34 }, 
{ name: "Sam", age: 29 }, 
{ name: "Todd", age: 45 }, 
{ name: "Bil1", age: 18 }, 
」 
data.Sort(function (a, b) { return a.age - b.age: }) 
data: // Bill 一 Sam 一 Joe~Todd 


この よう に 、Array オブ ジェ クト は 、 あな た が 用 意 し た 関数 オブ ジェ クト の 結果 を 参考 に 要素 を 並べ 替え て く 


れる の で す 。 関数 オブ ジェ クト の 便利 さき を 感じ て いた だ けた で し ょ うか 。 


(311-4 イベ ント ハン ドラ も 関数 オブ ジェ クト ) 


ボボ ボネ ドド ネネ ネネ ボネ キネ キネ ネネ ボネ ネネ ネネ ネネ ネネ ネギ ネネ ネネ ネギ ネネ ネネ ボネ ネネ キネ ネネ ネネ ボネ ボド ネギ ネネ ド ネネ ボキ ネネ ネネ ネギ ネネ ネネ ポキ ドド ドド ネネ ネネ ネギ ネネ ネネ キネ ネネ ギド ネネ ネネ ネネ ネネ ネネ ボボ ボネ ネギ ネネ ド ポポ ボネ キネ ネネ ポ ネネ ボ ボド ボド や ポ ネネ ポキ ボボ ネネ ボド ネネ ボド ボド ボネ ネネ ネネ ネネ キネ キネ ネネ ネネ ネネ ネギ ネネ ネネ ネネ ネネ ボネ ネネ ネネ ボボ ボド ボネ ボネ ポキ ポキ ネネ ネネ ネネ ネネ ネネ ド ネネ ボネ ネネ ネネ ネネ ネネ ネネ ポキ ボネ ネネ キネ ネギ ポキ ネネ キネ ネネ キネ ネネ キネ ギド ネネ ネネ ネネ ボネ ネネ ボド ネネ ボネ ネネ ネネ ネネ キネ ネネ ドキ ボキ ボキ NNNNNNNNNNNNNNNNNNNNNNNNNNNNN や NN ポポ 


以下 は 押さ きれ た キー の 値 を 画面 に 表示 する コー ド で す 。 


window .onkeydown = function (e) { 
document . getElementById( "resu1t").textContent = "keydown: ” + e.keyCode: 


この コー ド は 以下 の よう に 書く こと も で きま す 。 


function mykeydown(e) { 
document . getElementById("result").textContent = "keydown: ” + e.keyCode : 
ナ 


w1ndow . onkeydown = mykeydown: 


window.onkeydown と ある の は 、window オブ ジェ クト の onkeydown プロ パテ イィ イ と いう こと で す 。 この 


onkeydown は イベ ント 発生 時 の 処理 を 記述 する イベ ント ハン ドラ を 登録 する た め の プ ロ パ ティ で す 。 ここ に 関 
色 オ ブ ジェ クト を 代入 し て お く と 、 実際 に キー が 押下 きれ た と き に 関数 が 実行 きれ る の で す 。 つ まり 、 イベ ント ハ 
ンド ラ と は 関数 オブ ジェ クト に ほか な ら な い の で す 。 

マウ ス が 押さ る れ た 、 マ ウス が 動い た 、 キ ー が 押下 きれ た 、 と いっ た 事象 は ブラ ウザ が 検出 し ます 。 し か し な 
が ら 、 そ れ ら の 事象 が お きた と き に 何 も す る か は コン テン ツ に 依存 し ます 。 ブ ラウ ザ を 作る 人 は イベ ント が 発生 
し た と き に コン テン ツ で 何 を すべ きか 知る 由 $ も あり ませ ん 。 

そこ で 関数 オブ ジェ クト の 出番 と な る の で す 。 ブ ラウ ザ は 、 事象 が 発生 し た と き に 、 その 事象 に 応じ び た イ ベン 
ト ハ ンド ラ を 呼び 出す こと だ け 知 っ て いれ ば よい の で す 。 コンテンツ 作成 者 が 「 事 象 が 発生 し た と き に 何 を すべ 
きか | を 、 関 数 オブ ジェ クト と し て イベ ント ハン ドラ に 設定 する の で す 。 こ の よう な 和 柔軟 な 仕組 み が 簡 単に 実現 
で きる の も 関数 オブ ジェ クト の 恩恵 し いっ て よい で し ょ う 。 

ちな み に 、 ブ ラウ ザ が ベ ページ を ロー ド し た と き に 呼び 出す body 要素 の onload メソ ッ ド 、setlnterval や 
setTimeout と いっ た タイ マー 関数 の 引数 に 指定 する の も 関数 オブ ジェ クト で す 。 こ の よう に TavaScript で は さま 
ざま な 場面 で 関数 オブ ジェ クト の 恩恵 に あず か っ て いる の で す 。 


(3-1-5 | 本 章 の サン プル ) 


EE まま II まま II も II も も も も II も も も も も も も も も も も も も も も に も に も に も に も に も も も に も に も も も も に も に も も も も も も も も も も も も まま まま まま まま まま まま も も まま まま まま まま まま まま まま まま まま まま まま まま まま まま まま まま まま まま まま まま まま まま まま まま る まま る まま まま まる まる る る る 


本 章 で 学ん だ ]avaScript の 知識 を 6 と に 、 ゲー ム に 取り 掛か る まえ の 準備 運動 し し て いく つか 例 を ご 紹介 し ま 
し よう 。 


ルン イセ レル アル レ スン コ 





スラ イダ バー で 人 数 を 変え る と 、 それ に 応じ て 材料 の 量 が 変わ り ま す 。text-shadow、 box-shadow、 border- 
radius と いっ た CSS スタ イル を 使っ て いる と ころ に 注目 し て くだ さい 。 
イン タラ クティ ブレ シ ピ 
で 


ジャ ー マ ン ポテ ト 


スラ イダ で 人 数 を 変更 





・ ジャ ガイ モ 2 個 
・ 玉ねぎ 」 個 
ベー コト に 


人 数 分 の 量 に 変化 する 





1. ジャ ガイ モ と 玉ねぎ を 薄切り に し ます 

2. ベー コン 、 ジ ャ ガイ モ 、 玉ねぎ の 順 で 炒め ます 
3. 者 コシ ョ ウ で 味 を 調え ます 

4. 盛り 付け て パセリ を 撫 り か け て 出来 上 が り ! 
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く !DOCTYPE html> 
く html> 
く head> 
< く style> 
h2 { 
text-align: Center: 
J 
h3 { 
color: green: 
text-shadow: 2Dx 2Dpx 5Dx: 


pt 


font-s1ze: 209DxX: 


td { 
padding: 19Dx: 
background-color: #f の TOfO: 
box-shadow: rgba(9,9,9,9.4) 19px 19px 29px: 
border-radius: 19Dx: 
J 
く / style> 
く SCT1Dt> 
window.onload = function () { 
document . getElementById( "setNum”") .onchange = setNum: 


function setNum(e) { 
var num = parseTnt(e.target . value ) : 
Var V9=num, vV1 = の 9 の.5* num, V2 = 199 * num: 
document . getElementById("19") .textContent = vV9: 
document . getElementByTd("11").textContent = v1: 
document . getElementById("12”).textContent = vV2: 
document . getElementById( "num") .textContent = num 
J 
く / SCr1Dt> 
く /head> 
く body> 
<h2> ジ ャ ー マ ン ボテ ト </h2> 
く D> 
く 1nput 1d="setNum” tyDpe="range”" min="1" max="5" value="1"/> 
<span 1d="num">1</span> 人 前 
く / D> 
く table> 
く て て F> 


reCIDe.html 


く td roOwSDan="2"> 
く 1mg SrC=”"germanpotate . ]Dg” /> 


く /td> 
く td> 
<h3> 材 料 </h3> 
く u] > 
<1i> ジ ャ ガイ モ <span id="19"> 1 </span> 個 </1i> 
<1i> 玉 ね ぎ <span id="11">9.5</span> 個 </1i> 
<1i> ペ ベー コン <span 1d="12">199</ span>g</1i> 
<1i> バ セリ 少々 </1i> 
く /ul> 
く /td> 
く /tF> 
く t て F> 
く td> 
<h3> 作 り 方 </h3> 
く ol > 
<1i> ジ ャ カイ モ と 玉ねぎ を 薄切り に し ます </1i> 
<1i> ベ バー コン 、 ジ ャ ガイ モ 、 玉 ね ぎの 順 で 炒め ます </1i> 
<1i> 塩 コシ ョ ウ で 味 を 調え ます </1i> 
<1i> 盛 り 付 け て パセリ を 振り か け て 出来 上 が り ! </1i> 
く /ol> 
く /td> 
く /tF> 
く /table> 
く /body> 
く /html> 
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わか る と 思 
活用 し て くだ さい 。 
| <span class= year >1573</span>| で 囲ん だ 部 分 ヵ 
document.querySelectorAll( span.year )| で 、 その 部 分 を すべ て 選択 し 、 文字 列 を 下線 に 
ト ハ ンド ラ を 登録 し て いる こと に 注目 し て くだ きい 。 


赤色 の 下線 部 男 
いい ます 。 以下 の 例 は 歴史 年 表 で す が 、 


暗記 アプ リ 


3 


ん 愉 D:*BookwJavascriptwJav.… x 還 
安土 桃山 時 代 


才 草 府 が ーー 
豊臣 | ae 
文 禄 長 の 役 
で 徳川 


ae 


元 亀 4 年 信長 が 足利 義 8 を 京 か ら 放 逐 す る と 、 室 町 墓 府 は 事実 上 背 壊 し 、 織田 政権 が 確立 
' の 後 も 勢力 を 拡大 し 天下 統一 は 目前 と 思わ れ た 。 し か も 、 明 制 光 符 に よる 謀反 に よっ 
9 天正 10 年 (1 582 年 ) の 本 能 寺 の 変 で 自害 に 至っ た 。 


14 年 ( 年 ) に は 関白 ・ 太 政 


了 肖 吉 は いち 早く 京 | に 世 け 全 け 首 課 者 で ある 明 衝 交 先 を 破っ た 。 
こ 任 ぜ ら で 検地 と ど 刀 掛り を 実施 させ 政 


、 天 正 18 年 (1590 年 ) に 日 本 を 統一 し 
答 の 安定 | に カ を いた 





く html> 
く head> 
< く style> 
h1 { text-align: center: } 
h2 { 
Color: white: 
background-color: blue : 


ナ 

#history { 
border: 1px solid blue: 
w1dth : 699Dx : 

J 


Span.year { 
Color: red: 

け 

SDan.name { 
color: blue: 

J 

tr:nth-chi1d(2n) { 
background-color: 1ightblue: 


俊 文 人 交 





ぁ 措 記 アフ ブリ 


び を クリ ッ ク す る と 正解 が 表示 され ます 。 本 avaScript の 部 分 


『 は 非常 に シン プル な の で すぐ に 


英 単 語 や 元素 記号 な ど 目 分 専用 の 暗記 用 ペー ジ を 作っ て 


暗記 対象 部 分 と な り ま す 。 


| var years = 
直 き 換え 、 イベ ン 


クリ ッ ク す る と 正解 が 表示 され る 


history.html 


く / style> 
く SCF1Dt> 
w1ndow .onload = 1n1t: 
function 1n1t() { 
var years = document .querySelectorAl11("span.year”"): 
for(var1= の 9 : 1< く years.length : 1 ユ ++){ 
var y = years[i] : 
y.anSswer = y.textContent: 


ガ が 7 。 


ーー ーーーーー 』 


y .textContent = 
y.Onclick = function (e) { 
e.target.textContent = e.target .anSwer : 


} 
く / SCr1Dt> 
く /head> 
く body> 
<h1> 安 土 桃山 時 代 </h1> 
<h2> 年 表 </h2> 
く table 1d="history "> 
く tr><td>< く span class="year">1573</span> 年 </td><td> 室 町 幕府 が 事実 上 の 減 亡 </td></tr> 
く tr>< く td><span class="year">1599</span> 年 </td><td> 豊 臣 秀 吉日 本 を 統一 </td></tr> 
く tr>< く td><span class="year">1592</span> 年 </td><td> 文 禄 ・ 慶 長 の 役 </td></tr> 
く <tr><td><span class="year">1699</span> 年 </td><td> 関 ヶ 原 の 戦い で 徳川 家康 が 勝利 </td></ 
tr> 
く /table> 
<h2> 概 要 </h2> 
く p> 
元 亀 4 年 (<span cl1ass="year">1573</span> 年 ) に 信長 が 
<span class="name "> 足利 義昭 </span> を 京 か ら 放 人 逐 す る と 、 
室町 幕府 は 事実 上 崩壊 し 、 織 田 政権 が 確立 する 。 
信長 は その 後 も 勢力 を 拡大 し 天下 統一 は 目前 と 思わ れ た 。 
し か し 、<span class="name "> 明智 光秀 </span> に よる 謀反 に よっ て 
天正 19 年 (<span cl1ass="year">1582</span> 年 ) の 本 能 寺 の 変 で 自害 に 至っ た 。 
く / D> 
く D> 
<span class="name "> 羽柴 秀吉 </span> は 
いち 早く 京 に 駆け 付け 首謀 者 で ある <span cl1ass="name "> 明智 光秀 </span> を 破っ た 。 
天正 14 年 (<span cl1ass="year">1586</span> 年 ) に は 関白 ・ 太 政 大 臣 に 任 ぜ られ 豊臣 姓 を 賜り 、 
天正 18 年 (<span cl1ass="year">1599</span> 年 ) に 日 本 を 統一 し 
全国 で 検地 と 力 狩 り を 実施 させ 政権 の 安定 に 力 を 注い だ 。 
く / D> 
く /body> 


く /html> 
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ぁ 動く カレ ンダ ー 


カレ ンダ ー の 写真 部 分 を クリ ッ ク す る と 動画 が 再生 きれ ます 。 ビデ オ は 「<video src="video.MP4" 
onclick= play() />」 の よう に video 要素 を 使い ます 。 クリ ッ ク す る と play() が 呼ば れ 、 を こ で document 
getElementById( video )play() が 実行 きれ 、 再生 が 始ま り ま す 。 こ の 例 は CSS の モレ クタ に 多少 工夫 を し て 
し い 本 "。 


CSS の セレ クタ 
4 ウル ン 


tr:nth-chi1d(2 ) 
td:first-chi1d 







同じ 親 を 持つ 中 で ら 番 目 の tr 要素 (曜日 の 文字 を 倖 体 に ) 
向 じ 親 を 持つ 中 で 最初 の td 要素 (日 曜日 の 列 を 赤色 に ) 





クリ ッ ク す る と 動画 が 再生 され る 





Calendar.html 


く !DOCTYPE html> 
く html> 
く head> 
く style> 
vV1deo { 
w1dth : 699Dx: 
box-shadow: 19px 19px 19px rgba(9,9,9,9.4): 


J 
h2 { 
COlor: #9994ff: 
text-align: Center: 
J 
td { 


font-size : 28Dx: 
text-align: center: 
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border: 1DX Sol1d #CCcccC: 
border-rad1us: 5DX: 
ナ 
.Fed { 
COlor : Fed: 
ナ 
tr:nth-chi1d(2) { 
font-weight: bo1d: 
font-style: 1tal1C: 
ナ 
td:first-chi1d { 
Color: Fred: 
ナ 
table { 
marg1n: 29DxX: 
ナ 
く / style> 
く SCF1Dt> 
function play() { 
document .getElementById( "video”") .play(): 
ナ 
く / SCF1Dt> 
く /head> 
く body> 
<h2>2929 年 7 月 カレ ンタ ダー</h2> 
く table> 
く tF> 
く td colsSDan="7"> 
く v1deo src="v1deo.MP4” onclick="play()"/> 
く / td> 
く /tF> 
く t て F> 
く td> 日 く /td> 
く td> 月 く </td> 
く td> 火 く /td> 
く td> 水 </td> 
く td> 木 く </td> 
く td> 金 く /td> 
く td> 士 く /td> 
く /tF> 
く 信 > 
く td> く / td> 
く td> く / td> 
く td> く / td> 
く td>1 く / て td> 
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く td>2 く /td> 
く td>3 く / て td> 
く td>4 く /td> 

く / て F> 

く t て F> 
く td>5 く /td> 
く td>6 く /td> 
く td>7 く / て td> 
く td>8 く /td> 
く td>9 く /td> 
く td>109 く /td> 
く td>1 1 く /td> 

く / て tF> 

く 人 て F> 
く td>12 く /td> 
く td>13 く /td> 
く td> 1 4 く /td> 
く td>15 く / て td> 
く td>16 く /td> 
く td>1 7 く /td> 
く td>18 く /td> 

く / て tF> 

く tF> 
く td>19 く /td> 
く td class="red">20 く /td> 
く td>21 く / て td> 
く td>22 く /td> 
く td>23 く /td> 
く td>24 く / て td> 
く td>25 く / て td> 

く / て Fr> 

く tF> 
く td>26 く /td> 
く td>27 く / td> 
く td>28 く /td> 
く td>29 く /td> 
く td>30 く /td> 
く td>31 く /td> 
く td> く / td> 

く /tF> 

く /table> 
く /body> 
く /html> 
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1 章 か ら こ こま で 、 HTML、 CSS、 JavaScript と 説明 し て きま し た 。 量 が 多い と 思わ れ た か も し れ ま せん 。 肝 と 
な る 概念 に つい て は ひと と お り カ バー で きた と 思い ます が 、 要素 、 CSS ス タイ ル 、 組み 込み オブ ジェ クト の メソ ッ 
ド ・ プ ロ パ ティ な ど 説 明 で きた の は ほん の 一 部 で す 。 

し か し 、 基 本 が で き て いれ ば 目 分 で 調べ て 引き 出し を 増やし て いく こと が で きる は ず で す 。 引き 出し を 増やす 
に は 、 さま ざま な ソー ス に 接し て 、 自分 で 試し て みて 、 と いう プロ セス が 欠か せま せん 。 こ れ 以 降 ち も た くさ ん の サン 
ブル ゲー ム が 出 て きま す が 、 ぜ け ひ 目 分 で 入力 し て 試行 錯 諾 し て くだ さい 。 





これ まで の 知識 を も と に 自由 に Web ペー ジ を つく っ て みよ う 


HTML、CSS、JavaScript の 基本 は カバ ー し まし た 。 自分 自身 の アイ ディ ア を 活か し て 楽し い ペ ー ジ 
を つく っ て み ま し ょ う 。 ク リッ ク す る と 正解 が 表示 され る 元素 周期 表 、 正 解す る まで 問題 が 繰り 返し 表示 
され る 英 単 語 帳 、 い つも 乗る 電車 の 時 刻 表 、 等 々 。 こ れ ま で 出 て きた 例 を ベー ス に 自分 な り に 修正 し 
て みて も よい で し ょ う 。 


の 人 に 
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* 東 
に 3 


CanVvasS 





Canvas の 基本 


Canvas は HTML5 で 新しく 導入 され た 要素 で す 。Web ペ ー ジ 上 に 、 線 、 知 形 、 円 、 
ボリ ゴン 、 画 像 な どい ろ い ろ な も の を 描画 する こと が で きま す 。 Web ペ ー ジ の 可能 
性 は 飛躍 的 に 広がり 、 特 に ゲー ム で は 欠か せな い 要 素 と な り ま し た 。 本 章 で は 、 こ 
の Canvas の 使い 方 に つい て 説明 し て いき ます 。 


endeu う 


和 ル 4- | | canvas 要 素 で 図形 を 描く 


CanvasS は HTML5 で 追加 ご べ れ た 要素 で 、 線 や 息 形 、 円 、 画 像 な ど を 描画 で きま 
す 。 さら に 、 座 標 系 を 変換 し た り 、 一 部 分 を 切り 抜い た り と 、 さ ま ざ ま な 機能 が 利 
用 で きま す 。 


( 4.1-1 | 描画 の 手順 ) 

ある 人 が | あっ 、〈 る | と 叫び まし た 。 お そら 6 らく 「| 上 昧 ] を 連想 し た 人 が 多い と 思い ます 。 |「 見 て 、 あ の くも |」 
だ っ た ら 、| 雲 」 を 思い 浮か る の で は な いで し ょ うか ? 同じ |〈$ も | で も 状況 に よっ て 連想 する 内 容 が 違っ て きま 
す 。 こ の よう に 物事 を 判断 する た め に 必要 な 情報 を コン テキ スト (文脈 、 前 後 関係 、 背景 ) と いい ます 。 

Canvas と まっ た く 関 係 な いと 思う か も しれ ま せん が 、 Canvas を 習得 する 鍵 は コン テキ スト に あり ます 。 同じ よう 
に 筆 を 動か し た と し て も る 、 コ ン テ キ スト が 違え ば 描か れる 結果 が 異な っ て きま す 。 筆 を 持つ 手 を 同じ よう に 動か 
し て も (同じ よう な 処理 を 行っ て も ) 、 その と き の 絵 の 具 や 筆 の 状態 に よっ て 描画 され る 内 容 ( 色 や 太 き ) が 変わ 
る の と 同じ で す 。 

Canvas に 抽 画 する 際 は 、 


① HTML で canvas 要素 を 定義 

② JavaScript で canvas 要素 へ の 参照 を 取得 
③ canvas 要素 の 参照 か の ちら コンテ キス ト を 取得 
(《④ コン テキ スト に 色 や 線 の 太 さ な ど を 設定 

⑤ コン テキ スト に 対し て 線 や 息 形 な どの 描画 を 行う 


と いう 手順 に な り ま す 。 で は 、 さ っ そく 〈 例 を 見 て み ま し ょ う 。 
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CanvaS-Context.html 


く !DOCTYPE html> 
く html> 
く head> 
く <meta charset="UTF-8"> 
く SCF1Dt> 
Var CtX: 
function init() { 
var canvas = document.getElementById("canvas"): e 語 
ctx = canvas.getContext("2d"): e 放 


// コン テキ スト の 設定 
.StrokeStyle = "#FF9999": 
.fT111Style = "#909FF99": 
.1ineWidth = 19: 

.11neCaD = "round": 
.ShadowColor = "#999999": 
.ShadowBlur = 209: 


// 線 を 引く 

ctx .beginPath() : 

Ctx .moveTo(199, 199): 
ctx .11ineTo(189, 259): 
ctx . stroke( ) : 


// 知 形 を 塗り つぶ す 
ctx .fi11Rect(399, 199, 199, 156): 


// 知 形 を 描く 
ctx . strokeRect(599, 199, 199, 159): 





ナ 
く /SCr1Dt> 
く /head> 
く body onload="init() "> 
< く canvas 1d="canvas” width="799" height="499"></canvas> e 加 
く /body> 
く /htm1> 


HTML で は canvas 要素 を 定義 し ます 右 。 


く canvaS 1d="canvas” w1dth="799" height="499 "></canvas> 
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ここ で 注意 し た い の は 幅 を width 属性 で 、 高 き を height 属性 で 指定 する こと で す 。 


て いな いと 意図 し た 大 きる で 描画 きれ な いこ と が あり ます 。 
JavaScript で は 、 巴 の 


Var canvas = document .getElementById( "canvas") : 


で canvas へ の 参照 を 取得 し 、 次 に 還 の 


Cctx = canvas .getContext( "2d"): 


この 指定 が 止 し く な され 


で コン テキ スト を 取得 し ます 。 こ の ctx が 絵筆 な どの 情報 を 格納 する オブ ジェ クト と な り ま す 。 
多く の プロ グラ ム で は 、 コ ン テ キ スト を ctx や context と いっ た 広域 変数 に 格納 し て いる よう で す 。 引数 に [2d| 
と あり ます が 、 現在 は |2d] し か 指定 で きま せん 。 お そら 将来 的 に は 3 次元 の 仕様 が 策定 され る こと を 見 越し 


て この よう な 仕様 に な っ て いる の で し ょ う 。 


コン テキ スト を 取得 し た ら プ ブロ パテ ィ (絵筆 の 属性 ) を 設定 し ます 話 。 主 な プロ パテ ィ は 以下 の と お り で す 。 


図形 描画 の 主 な プロ パテ ィ 
プロ パテ ィ 内 容 

ctxstrokeStyle 
ctx.fi11Style 
ctx.1ineWidth 
ctx .11neCap 線 の 終端 の 形状 で 、 Dutt、 round、square の 値 が 使用 可能 
ctxshadowColor 


















コン テキ スト に ブ プロパティ を 設定 し た の ち 、 線 、 邊 形 の 塗り つぶ し 、 知 形 と 描画 し て いま す 茹 。 


描画 する 際 に 筆 を 動か す よ うに 、 Canvas で は 必ず 「 パ ス | と 呼ば れる 軌跡 を 設定 


し ます 。 そ の パス を 初期 


化す る の が beginPath() で す 。moveTo0 で 筆 を 下ろ し 、 lineTo() で 筆 を 動か し ます 。 た だ 、 こ れ だ け で は 画面 
上 に な に も 表示 され ませ ん 。 stroke() で 初め て 線 が 描画 きれ ます 。 ち な み に 、 吉 () で は パス で 囲ま れ た 鞭 囲 が 
沙 り つぶ され ます 。 filRect() と strokeRect() は 名 前 か ら 了 予想 で きる と 思い ます が 、 塗 りつ ぶし 、 征 形 の 描画 で 
す 。 座標 系 は マウ スイ ベン ト と 同じ く 、Canvas の 左上 を 原点 (0.0)、 右 方 向 に x 軸 、 下 方 向 に y 軸 と な り ま す 。 


線 、 塗 りつ ぶし 、 知 形 の 描画 


iss 
(0.0) 


村 財 避 で 








( 各 図 形 共通 ) 


ctx . shadowColor = "#999999"・ 


ctx . shadowBlur = 29: 


(100,.100) (300,100) 


150 





(180.250) A 


ctx .strokeStyle = " 才 F9999": 
ctx .1ineWidth = 19: 
ctx .11neCap = "round"・: 


// 線 を 引く 

ctx . beginPath( ) : 

Ctx .moveTo(199, 199): 
ctx .11neTo(189, 259)・: 
Ctx . Stroke( ) : 


ctx .f1i11Style = "#906FF99": 


// 知 形 を 塗り つぶ す 
ctx .†111Rect(399, 199, 199., 





CanvaSs で 図形 を 描い て みよ う 
Canvas を 使っ て 、 い ろ い ろ な 線 、 知 形 を 描画 し て くだ さい 。 


X 軸 方 向 





(500,100) 


100 


ctx . strokeStyle = " 才 F9999"・ 
ctx .11neWidth = 19: 


// 知 形 を 描く 
ctx . StrokeRect(599, 199, 199, 159): 


159 ) : 
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4 - り | さま さま な 図形 の 描画 


前 妥 で 見 た よう つ に 、Canvas で は 、 コ ン テ キ スト に プロ パテ ィ を 設定 し 、 描 画 用 の 
本 を 実行 する と いつ 手順 で 画面 上 に 図形 を 描き ます 。 こ こ で は 、 図 形 の 種類 別に 
設 征 で さる 属性 や 描き 方 の 概要 を 見 て いき ます 。 


EE ああ あま あま ああ まあ も も も も も も も も も も も も も も も まま も も も も も も も も も も も も も も も も も も も も も も に も に も も も も も も も も も も も も も も まま も も も ま まま まま まま まま えま まま まま まえ ネネ ネネ ネネ ミネ ま ミネ まま まま まま まま まま まま まま まま まま まま まま まま まま まま まま まま まま まま まま まま る まま まる る る まる も おる る も おおお おおお も ーー 


直線 や 多角 形 を 描画 する た め に 必要 な 主 な メソ ッ ド 、 プ ロ パ ティ は 以下 の と お り で す 。 


直線 、 多 角形 描画 の 主 な メソ ッ ド 、 プ ロ パ ティ 


メソ ッ ド 、 プ ロ パ ティ 説明 
beginPath() バス を クリ ア す る 


moveTo(x, y (X. y) 座標 に 筆 を 下ろ す 


) , V) 座標 に 
1ineTo(x, y) (X, y) 座標 に 筆 を 動か す 


closePath() バス を 閉じ る (人 筆 を 始点 まで 動か す ) 


stroke( ) 筆 が 動い た 軌跡 を 線 と し て 描く 
fi11() 筆 が 動い た 軌跡 の 範囲 を 塗り つぶ す 


strokeStyle 線 を 描画 する 際 の 色 を 指定 する 


fi11Style 塗り つぶ し の 色 を 指定 する 





バス を 閉じ た 場合 と 閉じ な い 場 合 、 そ れ ぞ れ に つい て 、 塗 りつ ぶし 、 軌 跡 で 描い た 4 パタ ー ン の サン プル を 


以下 に 示し ます 。 


CanvaS-Iine.html 


く !DOCTYPE html> 
く html> 
く head> 
く meta charset="UTF-8"> 
く SCF1Dt> 
Var CKtX: 
function init() { 
var canvas = document . getElementById( "canvas"): 
ctx = Canvas.getContext("2d"): 


ctx.strokeStyle = "#FF9999"・ 
ctx .f111Style = "#909FF99": 


drawTriangle(199, 19, false, false) : 
drawTriangle(299, 19, true, false) : 
drawTriangle(399, 19, false, true) : 
drawTriangle(499, 19, true, true) : 


function drawTriangle(x, y, isClose, isFi11) { 
ctx .beginPath( ) : 
Cctx .mOoveTo(X, y): 
ctx .11neTo(x + 89, y): 
ctx.1ineTo(x + 89, y + 89): 
1† (1sClose) { 
ctx .closePath( ) : 
5) 
1f (isFi11) { 
こも そま も ま まう): 
}) else { 
ctx . stroke( ) : 


J 
く /SCr1Dt> 
く /head> 
<body onload="1nit() "> 
く canvaS 1d="canvas” w1dth="599" height="199"></canvas> 
く /body> 
く /html> 


フラ ウザ 表示 例 


XX 
。。。 ニ ーーーーーーー ボ ーー 


1N 


パス を 初期 化し て な い 、 パ ス を 閉じ て いな いた め に 意図 し た 描画 に な ら な いこ と は よく ある ミス で す 。 線 を 描 
画す る と き は 必ず beginPath() を 実行 する 習慣 を つけ る と よい で し ょ 2 う 。 
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『 | | マウ ス の 軌跡 を 線 で 描い て みよ う 


マウ ス を 押下 し た 点 か ら 離 し た 点 ま で の 線 分 を 描画 する ペー ジ を 作成 し て くだ さい 。 次 に 、 マ ウス の 軌 
跡 を 描画 する ペー ジ を 作成 し て み ま し ょ う 。500x500 の 領域 を 設定 し て 、 そ の 中 に 描画 する よう に し 
ます 。 線 分 を 描画 する 場合 は 、canvas に onmousedown、onmouseuD の イベ ント ハン ドラ を 登録 
し 、 マ ウス が 押下 され た 座標 、 マ ウス が 離さ れ た 座標 を 取得 し ます 。 軌跡 を 描画 する 場合 は 、 さ ら に 
onmousemove の イベ ント ハン ドラ を 使用 し 、 マ ウス が 動い た 座標 を すべ て 配列 に 格納 し ます 。 


CanVvaS-line-mouseO.html、canvas-line-mouse1.html 





( 4.2-2 知 形 ) 
邊 形 を 反 画 する た め に 必要 な メソ ッ ド は 以下 の と お り で す 。 知 形 の 描画 は パス に 影響 を 与え を な い の で 
beginPath() や closePath() を 実行 する 必要 は あり ませ ん 。 


知 形 描画 の メソ ッ ド 

メソッド 説明 
strokeRect(x, y, w, h) (x.y) を 左上 隅 と し て 、 幅 w、 高 さ h の 息 形 の 輪郭 を 描く 
fi11Rect(x, y, w, h) (x.y) を 左上 隅 と し て 、 幅 w、 高 さ h の 息 形 を 塗り つぶ す 


clearRect(x, y, w, h) (x,.y) を 左上 隅 と し て 、 幅 w、 高 さ h の 息 形 を クリ ア す る 




















CanVaS-reCt.html 


く !DOCTYPE html> 


く html> 
く head> 
く <meta charset="UTF-8"> 
く SCF1Dt> 
Var CtX: 
function nit() { 
var canvas = document . getElementById( "canvas"): 
ctx = canvas .getContext("2d"): 
ctx.strokeStyle = "#FF9999": 
ctx . strokeRect(19, 19, 89, 89): 
ctx . 和 f111Style = "#99FF99": 
ctx .f1i11Rect(119, 19, 89, 89): 
ctx .f111Rect(219, 19, 89, 89): 
ctx .clearRect(239, 39, 49, 49): 
J 
く / SCr1Dt> 
く /head> 
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く <body onload="init() "> 
く canvaSs 1d="canvas" w1dth="399” height="199 "> く /canvaS> 
く /body> 
く / html> 


フラ ウザ 表示 例 


区 


5 加 請 旬 ) D:*Bookwgava5orptwCanw D ・ で 





(4.2-3 円 、 円 弧 ) 


NN ず NNNNNNNNNNNNNNNNNNNNNNNNN や NNN ポキ ポキ ボド ネギ ネ ド ボネ ボボ ネネ ネネ ネネ ボネ ギド ボネ ネギ ボボ ネネ ボネ ボド ボボ ネギ ネネ や ボボ ネネ ボボ ポキ ポキ ボキ ボボ ネギ ネギ ネギ ボド ボネ ネネ ゴネ ネネ ボネ ボボ ネネ ボボ ボボ ボボ ボド ボネ ボボ ボネ ボボ ネネ ネネ ゴネ ボボ ボネ ネネ ネネ ボネ ボネ ボボ ボボ ボネ ボボ ポ ボド ボ ボ ネ ネ ボネ ボネ ボボ ネネ ボネ ネギ ボボ ギド ネネ ボネ ボボ ネネ ネネ ボボ ド ネ ボネ ネネ ボネ ボネ ボネ ボネ ボボ ネネ ボネ ネネ ネネ ネネ ネネ ネネ ネネ ボネ ネネ ボネ ポポ ネネ ネネ ネネ ネネ ボボ ネネ ボボ ネネ ポポ ネ ボ ポポ ボネ ボ ボネ ネネ ボネ ネギ ポポ ボボ ネ ボ ネネ ネネ ネネ ポポ ネネ ボネ ポポ ネネ ボネ ネネ ボボ ネネ ポポ ボボ ポポ ポポ 3 さ ゆ ゆ ド し NN ポポ NN ポ ネネ 


円 を 描画 する た め に 必要 な メソ ッ ド は 以下 の と お り で す 。 
arc(x, y, radius, StartAngle, endAngle, anticlockwise ) 


(xy) を 中 心 と し 、 半 径 radius で 、startAngle か ら endAngle ま で の 殆 の パス を 描き ます 。 startAngle は 円 
故 の 捕 画 開始 角度 、endAngle は 描画 終了 角度 に な り ま す 。 

arc は 単に パス を 描く だ け の メソ ッ ド な の で 、 実際 に 描画 する た め に は 、 stroke() か 吉 () を 実行 する 必要 が あ 
る こと に 注意 し て くだ さい 。 

角度 は | ラジ アン 」 と いう 単位 で 指定 し ます 。 こ れ は 1 回 転 (360 度 ) を 2xZ (=3.1415…x2) と する 単位 
で す 。 度数 か ら ラ ジア ン へ の 変換 は | 度数 X ア = 180] で 求め られ ます 。 た と えば 、60 度 は ラジ アン で 表す と 
| 60x 巡 =180 = アテ 3」 と な り ま す 。anticlockwise に true を 指定 する と 反 時 計 回 り 、 false で 時 計 回 り と な り ま す 。 


CanvaS-Circle.html 


く !DOCTYPE html> 
く html> 
く head> 
く <META charset="UTF-8"> 
く SCF1Dt> 
Var C て X: 
function 1n1t() { 
var Canvas = document . getElementById( "canvas") : 
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CtX 


を 北 。 


の を 


で を 


で EX 。 
な も 芝 、。 
9 e 
も 全 


C を X . 
.mOVveTo(299, 59): 
.・arC(299, 5 の 9, 39, 9, Math.PI / 3): 


Mk を 
CtxX 


na 中 


CtX 


ny 本 
も 和 、 
EK 
に て 。 
の も 。 


の も 


CtX . 
に の が 3 


の を 半 


C も X 。 
CX 。 
C そ も X%。 


, 
く / SCF1Dt> 
く /head> 


= Canvas .getContext("2d"): 
StrokeStyle = "#FF9999": 


.f1i11Style = "#99FFFF": 


1ineWidth = 5: 


beginPath() : // 1: 円 

arc(199, 5 の 9, 39, 9, 2 x Math.P1): 
closePath( ) : 

まま よ ま た # く 

beginPath() : // 2: 扇 型 (時 計 回 り ) 


closePath( ): 


.Stroke( ) : 


beginPath() : // 3: 扇 型 ( 反 時 計 回 り ) 
moveTo(399, 59): 

arc(399, 59, 39, の, Math.PI / 3, true): 
closePath() : 

Stroke( ) : 


.beginPath() : // 4: 扇 型 ( 反 時 計 回 り ) 


も 先 。 


moveTo(499, 59): 
arc(499, 59, 39, -1 x Math.PI / 6, Math.PI / 6, true): 
closePath( ) : 


衝 も は 


beginPath() : // 5: 円 弧 の バス の み 
arc(599, 59, 39, 9, 2 x Math.PI / 3): 
fi11(): 


く body onload="init() "> 
く <canvas 1d="canvas" width="699" height="499"></canvas> 


く /body> 
く /html> 


上 記 の サン プル に お ける パラ メー タ と 実際 の 描画 の 様子 を 次 に 示し ます 。 


182 


ブラ ウザ 表示 例 





























円 の 場合 は 、 開始 角 に 0、 終了 角 に 2xZ を 指定 し ます 。 円 約 の 場合 は 開始 角 と 終了 角 を 指定 し ます が 、 円 
弧 を 描画 する 方 向 に よっ て 結果 が 大 きく 異な る こと に 注意 し て くだ さい 。 ま た 、 arc は 単に 円 放 の パス を 搬 く だ け 
で す 


サッ カー 場 を つく っ て みよ う 
Canvas を 使っ て 、 図 の よう な サッ カー 場 を 描画 し て くだ さい 。 








と TE 
で | 居 D:\Book\JavaScrip... | 「 仙 大 立 








CanVvaS-SOCCer.html 








: 
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(42-4 | 文字 ) 


mm の の お の の ちゆ の ゆあ の の の あの の の の の の の の は 邊 の の の の びび の 生 硬め の の 人 宮島 人 信人 仙人 全便 の の 人 の 人 の あの ちの 吉信 


文字 を 描画 する た め に 必要 な メソ ッ ド は 以下 の と お り で す 。 


文字 描画 の メソ ッ ド 
メソ ッ ド 説明 


x,y 座標 を 起点 と し て text の 輪郭 を 描く 


fillText(text, x, y) X.y 座標 を 起点 と し て text を 塗り つ 記 す 













CanvaS-Strings.html 


く !DOCTYPE html> 
く htm1> 
く head> 
く meta charset="UTF-8"> 
く SCF1Dt> 
Var Ctx: 
function init() { 
Var canvas = document.getElementById( "canvas") : 
Cctx = canvas .getContext( "2d")・: 
ctx.font = "36px "Times New Roman'": 


ctx.SstrokeStyle = "blue": 
ctx.StrokeText("strokeText に よる 文字 ", 19, 59): 


ctx .f111Style = "green": 
ctx .fi11Text("fi11Text に よる 文字 ", 19, 199): 
J 
く / scCr1Dt> 
く /head> 
く <body onload="1init() "> 
く canvaS 1d="canvas” width="359" height="129"></canvas> 
く /body> 
く /html> 


フラ ウザ 表示 例 


【 記 説 串 | D:\Book\JavaScript\Canv: 必 ~ 


strokeTextl に よる 文字 
illText[ に よる 文字 








184 


NN キ NNN ボド NNNNNNNNN や や NN ポポ NN ば NNNNNWNNNNNNNNWWW ば NN ば NNNN ポ w 


画像 を 描画 すろ る た め の メ ソ ッ ド は 以下 の と お り で す 。 


画像 を 描画 する た め の メ ソ ッ ド 


シア ムリ 月 に 


drawImage( 1mage , 


X.y の 位置 に w.h の サイ ズ で 画像 image を 描画 する 。 w、 h を 省略 し た と き は 元 の 画 


h 
メッ W 1) | 像 の サイ ズ で 描画 され る 





drawIHmage の 最初 の 引数 で ある image に は <img> 有 要素 を 指定 し ます 。 た だ し 、 HTML ペ ー ジ 中 に <img> 
要素 を 記述 する と 、 そ の 部 分 に 画像 が 表示 され て し まい ます 。canvas の 上 に 描画 し た い の に 、 HTML 要素 と 


し て 画面 上 に 表示 る 


れる の は 意図 し た 挙動 で は あり ませ ん 。 そこ で 、 


く 1mg 1d="fTru1it の 9” src="fruit9.png" style="display:none" /> 


の よう に | style= display:none 」 属性 を 指定 し て 、 HTML ペー ジ と し て は <img> 要素 を 非 表 示 に し ます 。 


く html> 
く <head> 


CanvaS-Image.html 


く <meta charset="UTF-8"> 


く style> 


#†1el1d { 


width: 899px: height: 899px: 


J 
く / style> 
く SCF1Dt> 


function in1t() { 


Va 
Var^ 
Va『 


Vad『 


VaF『 


Va『 


et を 
CtX . 
C じ て X。 
CtX . 


fru1t の 9 = document .. getElementById( "fruit9") : 
fruit1 = document.getElementById( "fruit1") : 
fruit2 = document.getElementById( "fruit2"): 
fruit3 = document .getElementById("fruit3") : 


field = document .getE1ementById("fie1d"): 
ctx = field.getContext( "2d"): 


drawImage(fruit の 9, 19, 19): 
drawImage(fruit1 , 299, 19, 199, 209): 
drawImage(fru1it2, 19, 199, 299, 199) : 
drawImage(fru1t3, 299, 299, 299, 209): 





〒 
し) 
い ① 
0 
ぐ ご 
いひ 
(の) 
の 
基 
本 
= 
い 
さ 
ま 
て 
ま 
な 
較 
形 
の 
揚 
画 
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く / SCF1Dt> 

く /head> 

く <body onload="1n1t() "> 
< く canvas 1d="field”" width="899” height="899 "> く /canVaS> 
く 1mg 1d="fFu1t の 9 の” src="fru1t の 9.png” style="display:none” /> 
く 1mg 1d="fTru1t1” src="f†TFu1t1 .png” style="d1isplay:none” /> 
く 1mg 1d="fFu1t2” src="fru1t2.png” style="display:none” /> 
く 1mg 1d="fTFu1t3" src="fTFu1t3.png” style="display:none” /> 


く /body> 
く /html> 
使用 し た 画像 
fruitO0.Dng fruit1.Dng fruit2.Dng fruit3.Dng 


| ctx.drawlImage(fruit0, 10. 10)] の よう に サイ ズ を 指定 し な い 場 合 は 、 オ リ ジ ナ ル の 画像 サイ ズ で 捕 画 る 
れ ま す 。 fruit1 一 fruit3 は 指定 し た サイ ズ で 描画 きれ て いる こと が わか り ま す 。 


画像 の 描画 


(0.0)!0 200 
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ニル > 市 還 還 
4-3 | 座標 糸 の 設 
CanvaS を 使 つ と 、 文 字 や 図形 、 画像 な どい ろ い ろ 描 画 で きる こと が わか り ま し た 。 
さら に 、Canvas に は 座標 系 を 変換 する と いう 強力 な 機能 が 用 意 べ され て いま す 。 こ 3 


れ に よっ て 、 た と えば 、 時 計 の よう な 均等 に 回 転 す る 図形 も 座標 系 を 回 転 さ せ て 簡 
里 に 押 く こと が で きま す 。 





(4-3-1 座標 系 の 基礎 ) 


た と えば 、 次 の よう な 時 計 の 文字 盤 を 描く と し まし ょ う 。 こ れ は 、 それ ぞ れ の 座標 を 求め て 、 moveTo や lineTo 
を 使っ て 線 を 引く こと で 描画 で きま す 。 


同 患 ③ 泌 薄 唄 | 5 ヤセ | 革 GSBAUBO 





し か し 、 実際 に みな さん が 手書き で 紙 に 描い て いく と き は 、 お そら く 〈、 下 図 の よう に 紙 を 回 転 き せる の で は な い 
で し ょ う が か が " 


紙 を 回 転 さ せ て 描画 


これ こそ が 座標 系 の 変換 に ほか な り ま せん 。 実際 の 例 を 見 て み ま し ょ う 。 
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く !DOCTYPE html> 








く html> 
く head> 
く META charset="UTF-8"> 
く SCF1Dt> 
Var CtX: 
function init() { 
var canvas = document . getElementById( "canvas") : 
ctx = canvas .getContext("2d"): 
for (VaF 1:= の 6: すぐ く 42 ・ 14r) f 
ctx . Save( ) : ee 
varr=Math.PI / 6 ぇ * 1: 
ctx .translate(199, 199) : を る 
ctx.rotate(r): e 工 3 
.beginPath( ) : 
.mOVveTo( の 9, -69): 
.1ineTo(9, -59): 
.Stroke( ) : 
ctx.restore(): e 加 
J 
J 
く / scr1Dt> 
く /head> 


<body onload="in1t( ) "> 
く canvasS 1d="canvas” width="299" height="299 "></canvas> 
く /body> 
く /html> 
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canvaS-Clock0.html 


この プロ グラ ム で 肝 と な る の は 次 の 手順 し メ ソ ッ ド で す 。 


回 ctx.Save() …… コン テキ スト (座標 系 ) を 保存 


皿 ctx.translate(100, 100) …… 座標 系 の 原点 を x 方 向 に 100、y 方向 に 100 移動 
回 ctx.rotate(r) …… 座標 系 を r 回 転 
措 画 


回 ctx.restore() …… コン テキ スト を 記 で 保存 し た も の に 復元 


初期 状態 は 下図 の の よう に 左上 を 原点 と する 座標 系 で す 。 こ れ を ctx.save() で 保存 し て お きま す 。 

次 に 、| ctx.translate(100, 100)] を 実行 する と 、(100, 100) を 新た な 原点 と する 座標 系 に 変換 きれ ます 。 る を 
の 状態 で (0. -60) か ら (0, -50) に 線 を 引 〈 と 下図 ② の よう に 線 が 引か れ ま す 。ctxrestore() を 実行 する と ctx.save() 
が 実行 きれ た と き の 座 標 系 に 復元 され ます 。 初回 は 回 転 角 が 0 で す が 、 for 文 で 徐々 に 座標 系 を 回 転 き せな 
が ら 指 画す る と (③ の よう に な り ま す 。 


座標 系 を 回 転 さ せな が ら 描 画 


① [amsiatedt00.100) > ③ rseo > ③ 


J 人 1166) 


これ を 繰り 返す と 時 計 の 文学 盤 が 描画 きれ る こと に な り ま す 。 


時 計 を つく っ て みよ う 


タイ マー を 使っ て 、 実 際 に 動く 時 計 を 描画 し て み ま し ょ う 。 ヒ ント は 以下 の と お り で す 。 


// 時 、 分 、 秒 を 求め る 
var now = new Date( ): 
now.getHours() % 12: 


m = now.getMinutes( ) : 
S = now.getSeconds() : 





P 症 





同 患 き 肖 弥 剛 | 5 ヤ | 斗 陣 GSBAUBO 


189 





190 





// 長針 、 短 針 、 秒 針 の 角度 (ラジアン) を 求め る 


var radH = (Math.PI * 2) / 12 * ょ h+ (Math.PI x* 2) / 12 * (m / 69): 
var radM = (Math.PI x 2) / 69 x m: 


var radS = (Math.PI x* 2) / 69 ぇ * Ss: 


0735:20 GMT+0900 (東京 (標準 時 ) 


CanvaSs-Clock1 .html 





* 東 
に 


Game 


実践 : ナー ム プ ログ ラミ ング 


HTML、CSS、JavaScript の 基本 を 習得 し た ら 、 い よい よ ゲ ー ム プロ グラ ミン グ に 
挑戦 で す ! わか ら な いこ と も ある か も し れ ま せん が 、 と に か く 習 う よ り 慣れ ろ 、 ひ た す 
ら 打 ち 込 ん で 、 動 作 を 確認 し 、 ゲ ー ム を 楽し ん で くだ さい 。 設 定 を いろ いろ 変え て い 
くう ち に 、JavaScript プ ログ ラミ ング の コツ や 書き 方 が が わか っ て くる で し ょ う 。 


_ 』e1deuo 





5- | | 15 Puzzle 


空欄 の 上 ト 左 右 に ある タイ ル を クリ ッ ク す る と その タイ ル が 移動 し ます 。 1 一 15 ま 
で 順番 に な る よう に 並べ る ゲー ム で す 。 








この ゲー ム で 学ぶ こと 
e DOM 要素 を JavaScript か ら 作 成す る 
e TO「 又 の 二 重 ル ー プ に な れる 





192 


Lek's ぃ rtke coAes ! 


く !DOCTYPE html> 


く html> 
く head> 
く title>15 Duzzle く /t ュ te> 
く meta charset="UTF-8"> 
く < く Style> 
.t1le { 
w1dth: 79Dx: 


J 
く / style> 
く SCF1Dt> 


"USG 


height: 79px: 

border: 1px solid blue: 
border-radius: 19Dx: 
text-align: Center: 
font-size: 36DxX: 


background-color: white: 


box-shadow: rgb(128, 128, 128) 5px 5px: 


本 を だ 殺っ * EE 湯 : 


// 広域 変数 


var tiles = []: 


// 初期 化 関数 
function init() { ャ セミ 


for (var i = の : i < 4 : i++) { 
var tr = document.createElement("tr"): 
for (var ]= の 9 : ]< く 4 : 二 +) { 


var table = document.getElementById("table"):  e 工 3 


+】 
+ 
ao 


var td = document.createElement("td"): e 較 人 


var indeXx ニュ *4+ ]: 
td.className = "tile"・ 
td.1index = 1ndex: 


td.value = index: 


td.textContent = index 


td.onclick = click: 
tr.appendChi1d(td) : 
tiles.push(td) : 

J 

table .appendChi1d(tr): 


・ 1nQdexX: 








Si / 衝 


NM/ カ JNN サー 守 


9 


! 
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for (var 1 = の : 1 く 1999 : 1++) { 
click({ srcElement: {index: Math.fl1oor(Math. random() * 16)}}) 


function click(e) { (9 


var i = e.srcE]ement. index: こ 10 


1f (1 - 4 >= の 8&& tiles[i - 4].value == の 9) { 
SwaD(1, 1 - 4): 

} else if (1 +4<16 && tiles[1 + 4] .value 
SwaD(1, 1 + 4): 

}) else if (1% 4 != の 8&& tiles[i - 1].value 


SWaD(1、1 … †): 
}) else if (1 %4 != 3 && tiles[i + 1].value 
SwaD(1, 1 + 1): 





function Swap(1, ])) { 


J 


var tmp = tiles[i] .value : 

tiles[i] .textContent = tiles[]] .textContent: 
tiles[1i].value = tiles[]] .value: 

tiles[]] .textContent = tmDp: 

tiles[]] .value = tmD: 


く / scr1Dt> 


く /head> 


く <body onload="1nit() "> 
く table 1d="table "></table> 


く /body> 
く /html> 





(5- -1 ソー スコ ー ド 解説 ) 
回 の | use strict | を 記述 し て お く 〈 と 、 より 厳密 に エラ ー チ ェ ッ ク が 行わ れ ま す 。 潜在 的 な バグ を 軽減 させ 
る ため に も 記述 し て お 〈 こ と を お 勧め し ます 。 


NIIOIITIIE| JavaScript は も と も と 、 変 数 を 宣言 し な く て も 利用 で きた り 、 同 じ 名 前 の 関数 を 重複 し て 宣 
言 で ざた り 、 と ゆる い 言 語 仕様 を 採用 し て いま し た 。 し か し 、 この よう な ゆる い 仕 様 は 、 習得 の 
敷 大 を 低く する 一 方 で 、 バ グ の 温床 に も な っ て し まい まし た 。 そ こ で 、 よ り 厳 密 に エラ ー チ ェ ッ 
クン を する た め に 「"use strict'] と いう 運用 が 定め られ まし た 。 こ の 行 を 記載 し て お く と 、 よ り 
厳密 な エラ ー チ ェ ッ ク が 行わ れる よう に な り ま す 。 バ グ を 減ら す た め に も 、 こ の 行 を 挿入 する 習 
慣 を つけ て お く と よい で し ょ う 。 


四 の init) で は 初期 化 を 行っ て いま す 。 まず 、 回 の 「var table = document.getElementById('table') | で 
table 要素 へ の 参照 を 取得 し て いま す 。 

行 は 要素 で 、 を の 中 の タイ ル は td 要素 で 実装 し て いま す 。 外側 の for 文 略 を 4 回 繰り 返す こと で 4 行 作成 
し て いま す 。 各行 は 回 の 「var tr = document.createElement('tr )」 で 作成 し て いま す 。 

1 行 作成 する た びに 、 内 側 の for 文 回 で タイ ル を 4 つ 作 成 し て いま す 。 各 タ イル は 記 の 「yvar td = 
document.createElement( td ) 」 で 作成 し 、 回 の tr.appendChild(td) で 行 に 挿入 し て いま す 。 要 は 4x4 の 
盤面 を JavaScript か ら 作 成 し て いる だ け で す 。 

Valune=0 の タイ ル は 何 も 捕 画 し な い 空 タイ ル で す 。 今回 の ポイ ント は index と value プ ロ パ ティ の 使い 方 で す 。 
index は タイ ル の 並び 順 で 、 valune は タイ ル に 描画 きれ て いる 数 値 で す 。 こ の ふた つ を 混乱 し な いよ うに 注意 し 
て くだ さい 。 


index は タイ ル の 並び 順 、value は タイ ル に 描画 され て いる 数 値 


Index=0 index=1 」index=2 」 index=3 
4 ] イ 
い ) し / | 
Vg//G= づ 』V り g//@= 70 Vg///6=/ .」 Vg/U/@=7 「 
Index=4 」 index=5 index=6 」 index= ア 
D 1 1 ノ 
Vg//@=0 Vg//6=7 7 』 Vg//6= グ 』 vVg//e=0 
Index=8 」 index=9 」index=10 」 index=1 1 
0 り 14 1 13 
VS 人 VGP ご VO の = の BIG79 
Iindex=12 index=13 』index=14 』 index=15 
リ 1 に い | 
1〆 4 | 1591 5 | 
Vg//@= 7 グ 2 」 V//6= イ Vg//@=75 ' V/U/G= ら 


タイ ル が クリ ッ ク さ れる と 、 回 の chck(e) が 呼び 出さ れ ま す 。 その タイ ル の 上 下 左 右 の どこ か に 空 タ イル 
(value プロ パテ ィ が 0 の タイ ル ) が あっ た 場合 、 そ れ ら タイ ル の value を 入れ 寺 え ます 。 そ の た め に は 、 ク リッ ク 
され た タイ ル の 上 下 左右 に 空 タ イル が ある か 調べ る 必要 が あり ます 。 

クリ ッ ク し た だ タイル の index は 男 の e.srcElementindex で 取得 で きま す 。 よ っ て 、 上 の タイ ル は index-4、 下 
の タイ ル は index+4、 左 の タイ ル は index-1、 右 の タイ ル は index+1 で 求め られ ます 。 


職 陣 時 革 





eizzndSLl | L-9 1 NNW グロ テー 生 : 避 江 < 
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クリ ッ ク し た タイ ル と その 上 下 左右 の タイ ル の index 


Index= ロ -4 


Index=14 


Index ニ ロ - 1 ノ Index= ロ + 1 


Value=2 


Index ニ ロ +4 





た だ し 、 値 を 比較 する 際 に は 若干 の 注意 が 必要 で す 。 た と えば 最上 段 が クリ ッ ク さ れ た 場合 、 そ の 上 に 行 
は な い の で 比較 で きま せん 。 逆 に 最 下 段 が クリ ッ ク さ れ た 場合 、 そ の 下 に 行 は あり ませ ん 。 

これ ら の 処理 は すべ て clck(e) の 中 で 行わ れ て いま す 。 た と えば 、 上 の タイ ル と の 比較 は 以下 の よう に 行っ て 
いま す ( 画 の 先頭 の 正文 )。 


1f (1) - 4 >= の 8&& tiles[i - 4].value == の 9) { 
SwaD(1, 1 - 4): 


index-4 が 0 以上 で ある か を 最初 に チェ ッ ク し 、 それ が true の 場合 、 す な わ ち 上 に タイ ル が 存在 する 場合 に 
限り 、「tilleslhi - 41value」 の 値 が 0 か 比較 し て いま す 。 

4 つの 正文 は 上 下 左右 の 比較 を 行っ て いる の で 見 比べ て みる と その 意図 が わか る と 思い ます 。 条件 式 が 成 
立 し た 場合 は 「swap, j)] を 呼び 出し て タイ ル の 番号 を 入れ 替え て いま す 。textContent (画面 表示 用 ) と 
Value (内 部 管理 用 ) の プロ パテ ィ を 入れ 替え て いる こと に 注意 し て くだ さい 。 

ちな み に 、 以 下 の 行 は タイ ル が ラン ダム に 1000 回 クリ ッ ク さ れ た 状況 を 再現 し て いま す 。 


for (var 1 = の : 1 く 1999 : i++) { 
click({ srcElement: {index: Math.floor(Math.random() * 16)}})) 


クリ ッ ク さ れ た と き に click(e) が 呼び 出さ きれ ます が 、click(e) の 中 で は e.srcElementindex で イン デック ス を 取 
和 侍 し て いま す 。 を その 関数 に 合わ せ て 引数 を 作成 し て いま す 。click(e) を 流用 せ ず に 別途 処理 を 記述 し て も る よかっ 
た の で す が 、 全 体 の 行 数 を 削減 する た め に この よう な 実装 と し まし た 。 





行 と 列 を 増やし て みよ う 
5 行 X5 行 の パズル に 変更 し て みて くだ さい 。 








FlipCards 


利 経 衰弱 ゲー ム で す 。 遊び 方 の 説明 は 不要 で し ょ う 。 
経過 時 間 が 表示 され ま す 。 


る スス を こる ああ た まえ えら 
の _ 
D で て 


か か 

か の @. ー 

YS まま 2 くつ 
> の" い 2 - 4。 
eee シッ ーママ 6 vec < oe 


や ぐ ぐ や - く ペペ 
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寺 2 

** 


あろ えみ ええ ええ えれ 人 


_ 
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て 


経過 時 間 :39 秒 


この ゲー ム で 学ぶ こと 
e Array オ ブ ジ ェクト の prototype を 使っ て みる 
e ツイ マー の 使い 万 に な れる 
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Lek's ぬ rtke coAes ! 


く !DOCTYPE html> 
く html> 
く head> 
く title>F11iD Cards< く /t ュ te> 
く META charset="UTF-8"> 
く style> 
td.card { に 1 
w1dth: 199px: 
height: 149px: 
border: 1px solid blue: 





border-radius: 19Dx: 

text-align: Center: 

font-Ss1ze: 36Dx: 

background-color: white: 

box-shadow: rgb(128, 128, 128) 5px 5Dpx: 


J 
td.back { を を る 
background-image: ur1("card.png"): * 補 .% 
background-Ss1ze: 199px 149Dx: 
J 
く / style> 
く SCF1Dt> 


"USe Str1Ct"・: 
// 配列 シャ ッ フ ル 
Array.prototype . shuffle = function () { と や ) 
var 1 = this.length: 
while (1) { 
var ] = Math.floor(Math.random() * 1): 
var t = this[--1i]: 
this[i」 = this[]]: 
this[]] = t: 
J 


Feturn th1s: 


// 広域 変数 


var timer = NaN, score = 9, 1ipT1imer, DrevCard, startTime : 


// 初期 化 関数 
function init() { * せ 】 
var table = document.getElementById( "table"): 


ーーーーーーーーーーーーーーーーーーー 


「 Var CardSs で eK 還 誠 
に 
“ ' 
198 「 「 


fOP (VSFP まだ 1・ em 1 間 26 す Ft) 


Cards . DuSh(1 ) : 


Cards . DuSh(1 ) : 


} 


cards.shuffle( ): 





OF VNF 3 ま 、 本 っ る: まま hk) を 7| 


Var 
for 


J 


tr = document.createElement( "tr"): 
すう 
var td = document.createElement( "td"): 


td.className = “card back": 
td.number = cards[i * 5+ ]]: 
td.onclick = †]iD: 
tr.appendChi1d(td): 


table .appendChi1d(tr) : 


startTime = new Date( ) : 


t1mer = 


setInterval(tick, 1999): 


// 経過 時 間 計測 用 タイ マー 
function tick() { 間 


Va「 TOW 


= new Date( ) : 


var elapsed = Math.floor((now.getTime() - startTime .getTime( ) ) / 1999): 
document . getElementById("time”) .textContent = elapsed: 


// カー ド 裏 返し 
function fl]ip(e) { 


Va「 S『C 


= e.SrCElement: 


if (fl1ipTimer || src.textContent != "") { 
Feturn : 


Va PU 


= SrC.number : 


Src.className = "card": 
Src.textContent = num: * を 3 


// 1 枚 目 
1† (prevCard == nul11) { 
DrevCard = SrC: 


Feturn: 





び 1 


spleodi』 | gc-g | NAVW77MIN ロ ビー: 避 潤 < 
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// 2 枚 目 

1f (prevCard.number == num) { 
1f (++SCOre == 19) { 

clearInterval (timer) : 

J 
prevCard = nul1: 
clearTimeout(f1ipTimer): 

) else { 


flipTimer = setTimeout(function () { 


Src.className = "card back": 
src.textContent = "": 
prevCard.className = "card back": 
prevCard.textContent = ""・: 
DrevCard = nul]: 
f]ipT1imer = NaN: 

}, 10999): 





} * 攻 』 ここ まで 
く / SCF1Dt> 
く /head> 
く <body onl1oad="init() "> 
く table 1d="table "></table> 
く h2> 
経過 時 間 : <span id="time ">9</span> 秒 
く /h2> 
く /body> 
く /html> 





( 5-2-1 ソー スコ ー ド 解説 ) 

CSS か ら 見 て いき まし ょ う 。 ぐ く style> 要素 で は 一 tdcard (カー ド の 大 きる 、 フ ォ ン ト サ イ ズ な ど ) と 識 td.back 
( 胃 面 ) と いう ふた つの セレ クタ を 定義 し て いま す 。 TavaScript で は 、 これ ら の スタ イル を 動 的 に 適用 する た め 
に 以下 の よう な 処理 を 行っ て いま す 。 


element.className = "card back": // カー ド が 裏 返 さ れ た 描画 
element.className = "card": // カー ド が 表 に 返さ れ た 描画 
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ここ で "element" は td 要素 を 参照 する 変数 で す 。 プ ログ ラム の 中 で は td と いう 変数 や src と いう 変数 が 使用 
され て いま す 。 

class 属性 を JavaScript か ら 設定 する と き は 、className プロ パテ ィ に 値 を 代入 し ます 。 代入 する 値 を 空白 
で 区 切る こと に より 、 複 数 の セレ クタ を 一 度 に 設定 し て いる こと に 注目 し て くだ さい 。 

ちな み に 、 記 の 「background-image: url( card.png )」 は 背景 画像 を 設定 する CSS スタ イル で す 。 

困 の Array.prototype.shuffle は 配列 の 要素 を ラン ダム に 入れ 禁 え る た め の メ ソ ッ ド で す 。 プ ロト タイ プ の と こ 
ろ で 詳し く 説明 し て いま す 。 れ た 人 は 読み 直し て くだ さい 。 

使用 し て いる 広域 変数 は 以下 の と お り で す 。 


使用 し て いる 広域 変数 












変数 


説明 


] 秒 ご と に tick() を 呼び 出す た め の タ イマ ー 





flipTimer ら 枚 目 に めく つた カー ド を し ば らく 表示 状態 に し て お くだ ため の タイ マー 






] 枚 目 に めく っ た カー ド 
最初 に ゲー ム を 開始 し た 時 応 


この ゲー ム で は 2 つの タイ マー を 使っ て いる こと に 注意 し て くだ さい 。tmer は 経 過 時 間 を 計測 する た め の も の 
で setlInterval、clearInterval で 制御 され ます 。 一 方 、 fiipTimer は 1 秒 後 に カー ド を 裏返す た め の も の で 、 
setTimeout、clearTimeout で 制御 され ます 。 混乱 し な いよ うに 注意 し て くだ さい 。 

例 に よっ て 、 処 理 は init) 関数 か ら 始 まり ます 回 。 

回 で は 20 枚 (ペア x10 組 ) の カー ド を ラン ダム に 並べ 替え て いま す 。 


var cards =[]: 

OPCVS まま 7 4 生 、: さす も う も を 
cards .DpuSsh(1 ) : 
cards . push(1 ) : 


け 
cards.shuffle( ): 


その あと の 太 の 二 重 の for 文 で カー ド を 並べ て いま す 。15 パ ズル と 同じ 処理 な の で 説明 は 省略 し ます 。 
回 の tick() 関数 で は 、 経過 時 間 を 表示 し て いま す 。 


function tick() { 
var now = new Date(): を で の ② 
var elapsed = Math.floor((now.getTime() - startTime.getTime() ) / 1999): 
document . getElementById( "time") .textContent = elapsed: 


| 
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(の new Date() で 現在 時 刻 が 取得 で きま す 。 

⑧ で は 、Date オブ ジェ クト の getTime() メソ ッ ド で 、 1970 年 1 月 1 日 00700000UTC か ら の 経過 ミリ 秒 を 取得 し 
て いま す 。 ゲー ム 開 始 時 の 値 と の 差分 を と り 、1000 で 割る こと に より 秒 単 位 の 経過 時 間 を 求め 、 画 面 に 表示 し 
の 

リス ト 全 体 に 戻り まし ょ う 。 回 の fip(e) 以下 が 肝 と な る 部 分 で す 。 カ ー ド が クリ ッ ク さ れ た と き に 呼び 出 き れる イ 
ベン ト ハ ンド ラ で す が 、 状 況 に 応じ て 処理 内 容 が 異な り ま す 。 順 を 追っ て 見 て いき まし ょ う 。 

まず 、 弄 の 処理 で す 。 


function f1ip(e) { 
Var Src = e.SrcElement: 
1if (f1ipTimer || src.textContent != "") { 
Feturn: 


J 


flipTimer が 値 を 保持 し て いる 間 (2 枚 が 表 に な っ て し ば らく 数 字 が 表示 きれ て いる 間 )、 も し く は すでに 表 に 
な っ た カー ド が クリ ッ ク さ れ た 場合 (「src.textContent に "|) は 、 何 6 行わ ず に return で 戻り ます 。 


次 に 男 の 、 


Var num = SrC.number: 
Src.className = "card"・ 
SrC.textContent = num: 


で クリ ッ ク さ れ だ カード を 表 に し ます 。 
次 の 田 の 、 


// 1 枚 目 

1† (prevCard == nu11) { 
DrevCard = SrC: 
FetUuFrn: 


は | prevCard == null が 成り 立つ 場合 、 す な わ ち 、 今 クリ ッ ク さ れ た カー ド が 1 枚 目だっ た と き は 、 現在 の 
カー ド を prevCard に 代入 し 、 return で 関数 を 抜け ます 。2 枚 目 の ク リッ ク を 待つ た めで す 。 

それ 以外 の と き は 2 枚 目 が クリ ッ ク さ れ た と き と な 0 り ま す 。 1 枚 目 と 同じ カー ド の と き は 調 の 処理 が 行わ れ ま す 。 
10 枚 目 に な っ た と き は 全部 の カー ド が 裏返し に な っ た の で 経過 時 間 を 計測 する た め の timer を 止め ます 。2 枚 
の カー ド が 同じ だ っ た の で 、 prevCard に null 代 入 す る と と も に (=1 枚 目 を クリ ア ) 、 元 に 裏返す た め の タ イマ ー 


fhpTimer を 停止 きせ ます 。 
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// 2 枚 目 
1i† (prevCard .number == num) て { 
1† (++ScCore == 19) { 
clearInterval(timer): 


+ 
prevCard = nul1: 
clearTimeout(fl11ipTimer) : 


] 枚 目 と 2 枚 目 が 異な る と き は の 処理 が 行わ れ ま す 。 


fl]ipTimer = setTimeout(function () { 
src.className = "card back": 
src.textContent = "": 
prevCard.className = "card back": 
prevCard.textContent = "": 
prevCard = nul]: 
f1ipT1imer = NaN: 

}, 1999) : 


1 秒 後 に 無名 関数 が 実行 きれ ます 。 つま り 、1 秒間 ふた つの 数 字 が 表示 ほれ た 状態 と な り ま す 。 無名 関数 
の 中 で は 1 枚 目 の カー ド prevCard と 2 枚 目 の カ ー ド src に 対し て 、 className で スタ イル を 適用 し 、 textContent 
に 空 文字 を 代入 する こと で 元 の 裏返し の 状態 に 戻し て いま す 。 ま た 、 prevCard と fipTimer の 値 を クリ ア し て 、 
最初 の 状態 に 戻し て いま す 。 

神経 衰弱 ゲー ム の 解説 は 以上 で す 。 シ ンプ ル な ゲー ム で は あり ます が 、 1 枚 目 を めく っ て いる の か 、2 枚 目 を 
めく っ て いる の か な と 場合 分 けが 少々 面倒 に 感じ られ た か も し れ ま せん 。 


枚数 を 変え て みよ う 


1 - 13 ま で の カー ド が 4 種類 、 計 52 枚 の 神経 衰弱 ゲー ム を 作成 し て くだ さい 。 





FPN 
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Carrylt 
理 か が ら あ る 定番 ゲー ム で す 。 人 が 荷物 を 所 定 の 位置 に 移動 さけ せる だ け の シン プル 
な ゲー ム で す 。 た だ し 、 人 は 荷物 を 引っ 張る こと は で きず 、 押 すこ と し か で きま せ 
ん 。 ま た 、 ふ た つ を 同時 に 押す こと は で きま せん 。 すべて の 荷物 を 所 定 の 場所 に 移 
動 し て くだ さい 。 実際 に や っ て みる と 思い の ほか 難し いか も し れ ま せん ん,。 











Lv 」 
中 還 | 
L9 | 


天 印 キ ー で 人 を 動か し て 荷物 を 押し て いき 、 荷 物 を 劉 印 に 収め れ ば OK 





この ゲー ム で 学ぶ こと 
% 仮想 マッ プ の 使い 方 に な れる 
% JaVgSC「IDt か が か ら 画 像 を canvas に 描画 する 
* ビット 演算 に な れる 





204 





の 
ツ 
で 
O 
いり 
N 
= 
m. 
区 
3 
の 
こり 
ツ 
=j 





く !DOCTYPE html> 


く html> 


く <head> 





く title>CarFyTt く /t ュ tle> 


"UTF-8"> 


<meta charset 





く SCF1Dt> 





"USe Str1Ct"・ 


p 他 演 


「 
| 
| 
| 
| 
| 
' 
| 


[6, 6 , 6 , 6 , 6 , 6 , 6 , 6 , 6 , 6 , 6 , 6 , 6 , 6 , 6 , 6 , 6 , 6 , 6 , 6], 


[6, 6, 6, 6, 6, の 9, 9 の, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6」, 
[6, 6 , 6 , 6 , 6 , ・ 9 , 9 , 6 , 6 , 6 , 6 , 6 , 6 , 6 , 6 , 6, 6 , 6 , 6」 , 


var data 


[6, 6 , 6 , 6 , 6 , 9 , 9 , 症 6 , 6 , 6 , 6, 6 , 6 , 6 , 6 , 6 , 6 , 6 , 6], 
[6, 6 , 6 , 9 , 9 , ま 。 9 , 9 , 2 , 9 , 6 , 6, 6 , 6 , 6 , 6 , > 6 , 6 , 6] , 


[6, 9 , 9 , の , 6 , 9 , 6 , 6 , 6, 9 , 6 , 6 , 6 , 6 , 9 , 9 , 1 1 馬 


[6 , 9 , だ 9 , 9 , 人 9 , 9 , 9 , 9 , 9 , 9 , 9 , 9 , 9 , 9 , 1 だ 「 が 


ホー スト ロ や IN へ や 


[6, 6 , 6 , 6 , 6 , 9 , 6 , 6 , 6 , 6 , 9 , 6 , 9 , 6 , 9 , 9 , 委 当 


[6, 6, 6, 6 6, 9, の , 9 9 の, の, 9, 6, 6, 6, 6, 6, 6, 6, 6, 6]」, 


ら - 3 Carrylt 


[6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6」, 





/ 


* 初期 化 関数 


メ / 
function 1n1t() { 


+ 外 


document . getElementById(”"soko”) .getContext(”"2d"”): 


ら C 


= mykeydown : 


onkeydown 


FeDa1nt( ) : 


ーーー ーーーーー ーーーーーーーーーーーーーーーーーーーーー ~ー ーーーーーーーーーー] 


function u(){ mykeydown({keyCode:38)): )}) 
function d(){ mykeydown({keyCode:49})): }) 
function 1(){ mykeydown({keyCode:37): } 
function r(){ mykeydown({tkeyCode:39)): }) 


= 


| 


+i 


function mykeydown(e) { 


= DX, dx1 
Switch (e.keyCode) { 


Var dx の 


CN 
昌 
1 
一 
> く 
や 
1 
| 
で や 
> 
ィ ェ 半 還 守 7 
こら 
16 01 
Fw 
の に 
- 〇 
の ① 
の ) 
(① 
り 


CaSe 38: dy の --: dy1-=2: 


break : 
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CaSe 39: dX の ++: dx1+=2・ 
break : 


CaSe 49: dy9++・ dy1+=2・ 


break : 


if ((data[dy9][dx9] & 9x2) == 9@) { // 荷物 な し & 壁 な し - 進 む 

DX = dx の : 

py = dy9: 
if ((data[dy9][dx9] & 9x6) == 2) { // 進行 方 向 に 荷物 あり 

if ((data[dy1][dx1] & 9x2) == 9@) { // 荷物 な し & 壁 な し 一 進む 
data[dy9][dx9] ^= 2: // 隣 の 荷物 を クリ ア 
data[dy1][dx1] |= 2: // 更に 先 に 荷物 を セッ ト 
DX = dx の : 
py = dy9: 





Fepa1nt( ) : 


function repaint() { ドア 1 
gc.f111Style = "black"・ 
gc.f111Rect(9, 9, 899, 449): 


for (var y= の 9: y< く data.1ength : y++) { 
for (var x = の : x < data[y] .1ength : x++) { 
1f (data[y][x] & 9x1) { 
gc .drawImage(1mgGoal, x * 49, y * 49, 49, 49): 
ナ 
1f (data[y][x] & 9x2) { 
gc .drawImage(1mgLuggage, x * 49, y * 49, 49, 49): 
J 
1f (data[y][x] == 6) { 
gc .drawImage(1mgWa11, x * 49, y * 49, 49, 49): 


ナ 
J 
) 
gc.drawImage(1imgWorker, px * 49, py * 49, 4 の 9, 49): 
J 
く / SCF1Dt> 
く /head> 


く body onload="init() "> 
く canvas 1d="soko" width="899" height="449"></canvas> 
く table> 
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く tr> く td> く /td> く td> く button onclick="u( ) ">U く /button> く /td> く td> く / td> く /tF> 
く tF> く td> く button onclick="1() ">L く /button> く </ td> く td> く / td> 
く td>< く button onclick="r() ">R</button>< く / て td> く / て tF> 

く tF> く td> く / td> く td> く button onclick="d() ">D く /button>< く / td> く td> く / td> く /tF> 
く /table> 

く 1mg 1d="1mgWal1" src="1mgWall.png” style="display:none" /> 

く 1mg 1d="1mgGoa1" src="1mgGoal .png” style="display:none" /> 

く 1mg 1d="1mgWorker” src="1mgWorker.png” style="display:none”" /> 

く 1mg 1d="1mgLuggage” Src="1mgLuggage.Dng” style="display:none" /> 
く /body> 
く / html> 





(5-3-1 ソー スコ ー ド 解説 ) 


使用 し て いる 広域 変数 は 以下 の と お り で す 。 


ーー し て いる 広域 変数 
説明 
Canvas に 描画 する た め の グ ラフ ィ ッ クコ ン テ キ スト 
主人 公 の x 座 標 


主人 公 の y 座 標 
地図 デー タ 、 0: 通 路 , 1: 目 的 地 . : 荷物 , 6: 壁 





人 期 化 関数 で す 。canvas の 描画 用 コン テキ スト を 変数 gc に 格納 し 、 キ ー 押 下 時 の イベ ント ハン ドラ に 
mykeydown を 登録 し 、 再 描画 を し て いま す 。 





4EIOI05 り 00J86 


下 左右 ボタ ン が 押 き れ た と き の コ ー ル バッ ク で す 。 < く table> 要素 を 見 て い (た だ けれ ば その 中 に 上 下 左右 
ボタ ン が 配置 きれ 、 上 下 左右 ボタ ン の onclick 属 性 が 設定 され て いる こと が わか り ま す 。 対応 する キー が 押下 
され た と き の 処 理 を 行っ て いま す 。 





4| mykeydown(e) 


キー 押下 時 の イベ ント ハン ドラ で す 。 キー 押下 時 の イベ ント ハン ドラ で は 、 引 数 e の keyCode プ ロ パ ティ を 見 
る こと で どの キー が 押さ きれ た か が わか り ま す 圏 。 こ の ゲー ム で は 、 移動 方 向 の 先 に 荷物 が ある か 、 さら に その 先 


び 1 
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が 空い て いる か 、 と ふた つ 先 まで 調べ る 必要 が あり ます 。 それ ら の 座標 を 管理 する た め の 変 数 が dx0、dy0、 
dx1、dy1 で す 。 ひ と つ 寺 の 座標 が (dx0、 dy0) で 、 さら に 先 の 座標 が (dx1、 dy1) で す 。 を その 様子 を 以下 の 図 
に 示し ます 。 


キー 押下 時 の イベ ント ハン ドラ 





ed 
3 


dx1.dy1 
dx0,dyO 
去 37| |dx1.dy1| ldx0.dy0 本 














dx0.dy0| |dx1.dy1| 講 89 

















ここ か ら 売 の コー ド を 理解 する に は 2 進数 と 論理 演算 の 理解 が 必要 で す 。 実は 、 こ の 程度 の ゲー ム で あれ 
ば 、 語 埋 演 PaPameweas し か し 、 論 埋 演算 を 使用 する こと で コー ド の 行 数 を 削減 で き 
そう だ っ た の と 、 主 人 人 計 JKk 本 各 aog 全 nik し し > で は 、 な ザ ぜ 論理 演算 を 使う 
と 便利 な の か その 理由 を 考え て み ま し ょ 2 う 。 


ゲー ム の 状態 は data と いう 二 次 元 配 列 で 管理 し て いま す 瑞 。 こ こ で 問題 に な る の は 荷物 が 目的 地 に 重なっ 
た 場合 で す 
荷物 と 目的 地 の 状 態 
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上 図 左 の 状態 か ら 荷 物 を 右 に 動か す と 、 移動 先 の 座標 の 値 は 2 に な り ま す (上 図 中 央 ) 。 さ ら に 回 り 込 ん で 
答 物 を 左 に 戻し た と し ます (上 図 右 ) 。 す る と 荷物 が あっ た 座標 に は どん な 値 を 設定 すれ ば よい で し ょ うか ? 目 
的 地 の 1 が 荷物 の 2 で 上 書き る きれ て し まっ た の で 、1 を 設定 する の か 0 を 設定 する の か わか ら な く な っ て し まい ま 
す 。 上 書き する 前 の 値 を 覚え て お け ば 対処 する こと も 可能 で す が 処 理 が 面倒 で す 。 

そこ で 、 和 荷物 が ある か 和 否 か を 単なる 数 字 で 表す の で は な く 、 ビ ッ ト の 位置 で 表す こと に し まし た 。 通路 、 目的 
地 、 和 荷物 、 区 に 0、1、 2、 6 と いっ た 数 値 を 割り 当て た の は 実は 意味 が あっ た の で す 。 を その 理由 は も う 5 少し 読 
み 進 め る と 理解 で きる の で 少々 お 待ち くだ さい 。 

で は 、 論 理 演算 に つい て 簡単 に 説明 し ます 。 必 は ビッ ト ご と の AND 演算 、| は ビッ ト ご と の OR 演算 を 行う 演 
算 子 で す 。 ふ た つの 値 (2 進数 1 ビッ ト ) を AND、 OR を 計算 し た 結果 は 以下 の よう に な り ま す 。 つ まり 、AND 
演算 で は どちら も 1 の と きのみ 結果 が 1 に 、OR 演 算 は 少な (と も どちら か 1 の と き に 結果 が 1 に な り ま す 。 





10 進数 で AND 演算 、 OR 演算 を 計算 する 場合 、 い っ た ん 2 進数 に 直し て 、 を それ ぞ れ の ビッ ト に つい て 上 記 
の 表 を 適用 し ます 。 た と えば 、44 と 26 の AND と OR は 次 の よう に な り ま す 。 


AND 演算 、OR 演算 の 例 
44& 26=8 44 | 26 = 62 


44 ゅ 1911969 44 191196 


2Z6 ゅ 911916 26 ゅ 911916 


991999 ゅ 8 111119 62 





NIIOIITIIE| ある 状態 を 変数 で 管理 する 場合 、 取 りう る 値 が どれ か ひと つの 場合 は 単に 数 値 を 割り 当て れ ば 
大 丈夫 で す 。 た と えば 、 グ ー テ 0、 チ ョ キテ ] 、 パ ー= ら と いっ た 具合 で す 。 一 方 、 取 りう る 状態 
が 複数 ある も の を 1 つの 変数 で 表現 する 場合 、 た と えば 、 朝 ・ 昼 ・ 晩 それ ぞ れ の 状態 で 、 食 べ 
た ・ 食 べ な いと いっ た 値 を 表現 する と き は 、 ピ ビット 演算 を 使っ た ほう が 便利 で す 。 1 ビット 目 = 
朝 、 ら ピッ ト 目 三 昼 、 ピッ ト 目 三 夜 と し て し まえ ば 、8 と お り の 状態 を 1] つの 変数 で 容易 に 表現 
で きる よう に な り ま す 。 


ここ まで くれ ば も う 一 中 で す 。 通路 0、 目的 地 1、 荷物 2、 克 6 と 変 な 値 を 割り 当て て いま し た が 、 実は 荷物 の 
有無 と 移動 で きる か 否 か を 2 ビッ ト 目 が 0 か 1 か で 判断 し て いた の で す 。 

まず 、 そ れ ぞ れ の 値 と 2 と の AND を 計算 し て み ま し ょ う 。0x2 は 2 進数 で 010 な の で 、 この 数 値 と AND を 計算 
する と いう こと は 、2 ビ ッ ト 目 を 取り 出す こと と 同じ に な り ま す 。 を その 結果 、 通 路 と 目的 地 は 0、 荷物 と 克 は 1 と な り ま 


回 回 回 軸 国 





IAJneO | e-9 1 NAMW7 グ MM ロー 和民 : 避 江 < 


209 


210 


す 。 通路 と 目的 地 は 自由 に 移動 で きま す 。 つ まり 、 デー タ と 0x2 の AND 計算 結果 が 0 で あれ ば 自由 に 動け る の 
で す 。 


ど 進 数 & Ox の 
どど ビッ ト 目 あり 月 3 三 (DU10 と の AND) 





次 に 、 何 物 が 通路 や 目的 地 の 上 を 動く こと を 考え ます 。 荷物 は Ox2 で し た 。 通路 や 目的 地 ほ と の OR を 取る こと 


で 、 何 物 の ある 通路 、 荷物 の ある 目的 地 を 表現 で きる よう に な り ま す 。 


ど 進 数 
どど ビット 目 < あ 月 三 
退路 
目的 地 


何 物 | 通路 


何 物 | 目的 地 





準備 は すべ て 整 じ まし た 。 回 の コー ド を 見 て み ま し ょ う 。 


if ((data[dy9][dx9] & 9x2) == 9@) { // 通路 か 目的 地 一 進む で の ) 
DX = dx の : 
py = dy9: 

} else if ((data[dy9][dx9] & 9x6) == 2) { // 進行 方 向 に 荷物 あり 
if ((data[dy1][dx1] & 9x2) == 9@) { // さら に 先 は 通路 か 目的 地 を C) 





まず 、⑳⑯ の | (dataldyOlldx0] 科 0x2) == 0」 と いう 条件 式 に より 、 ひと つ 先 が 通路 か 目的 地 か 判断 し て いま 
す 。 条件 が true の 場合 は 前 に 進め る の で 、 現 在 地 (px, py) を ひと つ 先 の 座標 (dx0, dy0) に 設定 し ます 。 

次 の せ 文 の 条件 式 @ | (dataldyOlldx0] を 0x6) == 2」 は 少し 説明 が 必要 で す 。 な ぜ 0Ox2 で な く Ox6 を 使っ 
て いる の で し ょ うか ? 璧 と 荷物 に 対し て Ox2 の AND 演算 を 行う と 、 


・ 壁 :6&Ox2=2 
*。 何 物 :2&Ox2=2 


と な り ま す 。 胡 と 条 物 は 区 別して 処理 する こと が 必要 な の に 、 璧 と 荷物 の 区 別 が で き な く な っ て し まい ます 。 よ っ 
て 、Ox6 (2 進数 で は 110) と の AND を 取る こと に し ます 。 


・ 壁 :6&Ox6=6 
・ 何 物 :2&Ox6=2 


これ で 、 選 か 和 物 か を 正しく 区 別 で きま し た 。 
次 の 文 ⑦ は 、 さら に 先 が 移 動 可 能 か を 判定 する も の で 、 最初 の 文 と ほぼ 同じ で す 。 次 の 場所 に 和 荷物 が 
あり 、 さ ら に ひと つ 先 が 移動 可能 と いう こと は 、 荷 物 を 移動 で きる と いう こと な の で 、⑥) で を その 処理 を 行い ます 。 


data[dy9][dx9] ^= 2: // 隣 の 荷物 を クリ ア 
data[dy1][dx1] |= 2: // さら に 先 に 荷物 を セッ ト 


へ 演算 子 は ビッ ト 排 他 論理 和 と いっ て 、0 を 1 に 、 1 を 0 に 反転 する も の で す 。「^= 2」 と する こと で 、 2 ビッ ト 目 
を 反転 し た 結 洒 を 自分 目 身 に 代入 し ます 。 

| 演算 子 は OR 演算 子 で す 。「 | = 2] と する こと で 、2 ビ ッ ト 目 の ビッ ト を 1 に し た 結果 を 自分 自身 に 代入 し ま 
す 。 こ れ ら の 処理 を 行う こと で 、 隣 に あっ た 荷物 を さら に ひと つ 先 に 移動 し て いま す 。 

この よう に 論理 演算 を 使用 する こと で 、 デ ー タ の 様子 は 以下 の よう に な り ま す 。 


























3EkWg:ieFElleht@ 


まず 以下 の コー ド で 背景 を すべ て クリ ア し て いま す 。 


gc.f111Style = "black": 
gc .†111Rect( の 9, の, 899, 449): 





7 


いり 
< 人 


NVY7 カ NIINH テ ビー: 


と 9 


]| 和 人 A」』JJB の 
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あと は 、 二 重 の for 文 で それ ぞ れ の マス に 応じ た 画像 を 描画 し て いま す 。 目的 地 の 上 に 荷物 を 置い た りす る 
こと も ある の で 、else や switch を 使っ て いな いこ と に 注意 し て くだ さい 。 

最後 に HTML の 部 分 で す 。 |「 <canvas id='soko width='800” height="440'></canvas>」 は width/ 
height 属 性 を 明示 的 に 指定 し て いる こと に 注意 し て くだ さい 。 こ の 指定 を 忘れ る と 意図 し た 大 きき で 描画 され な 
いこ と が あり ます 。 


| <img id=.. src= . 


LU 


style= display:none />| と いっ た 画像 は canvas に 描画 する た め の も の で す 。 
HTML で 表示 する 必要 は な い の で 、| style= display:none 」 と style 属性 を 指定 し て いま す 。 

以上 で この ゲー ム の 説明 は 終了 で す 。 コ ー ド の 行 数 は 少な いも の の 、 論理 演算 や canvas へ の 描画 な どき さま 
ざま な 要素 が 含ま れ て いま す 。 ぜひ し っ か り と 理解 する よう に し て くだ さい 。 


自作 パズル に 挑戦 し て みよ う 
目 分 な り の パズル (マッ プ ) を 考え て み ま し ょ う 。 友 人 と 問題 の 出し 合い を し て も お も し ろ い で し ょ う 。 





Reversible Piece 


これ も ルー ル 説 明 不 要 の 定番 ゲー ム で す 。 あ まり 強く は あり ませ ん が コン ピュ ー タ 
が ちゃ ん と あな た の 相手 を し て くれ ます 。 





黒 ( あ な た ) :4 枚 白 (PC) :4 枚 黒 ( あ な た ) :29 枚 白 (PC) :13 枚 





この ゲー ム で 学ぶ こと 
s* コン ピュ ー タ の 思考 回 路 を 実装 する 


還 H 
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Lek's rtEe coAcs ! 


く !DOCTYPE html> 
く html> 
く head> 
く title>Revers1bleP1iece</tit]e> 
く meta charset="UTF-8"> 
く style> 
#Doard { 
background-color :#555555: 
J 
td.cell { 
background-color: 埋 FB27F: 
w1dth: 69Dx: 
height: 69Dx: 
marg1n: 2DX: 
font-s1ze: 59Dx: 
text-align: Center: 
J 
_ td.b1ack { 
color: black: 
J 
td.white { 
color: white: 
J 
</style> 
く SCT1Dt> 


"USe StFr1Ct"・: 


var WeightData =[ 
に ッ 3 導 < また: 疹 に マモ も ーー すす 夫 に ー ま ご 3 衝 
っ 
トー 9] , 
上 E。 で す 。 は 、 で も =1。 "すす 、- 和 も 3。。 テー す す 。 
に つも "まき 。 =ー キ 。 = こま) =ー も 。 "1、 =3。 1 。 
2 9] , 
トー12、 っ 1 も 。 こう こと まっ ーー すこ 19。 ー1 デ )。 
に 302ー4 ア 、 、 全 、 ゃ た 。 全 。 マ Z 301> 

す 3 

var BLACK = 1, WHITE = 2: 

var data = [|」: 


var myTurn = false: 


/ 六 大 


* 初期 化 関数 
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*/ 

function init() { と 生ま 
var b = document.getElementById( "board"): 

OF た て VaF 3 つつ - ぶす で 8 > 3 を) て 













var tr = document.createElement("tr"): 
data[i] = [の , 9, 9, 9, 9, の, 9 の, 9]: 
for (Var す サ ニ の 9: すぐ なき ・ 1++) 


び 1 


var td = document.createElement("td"): 
td.className = "cel1": 

td.id = "ce11"+ ォ ュ + ォ : 寺 5 
td.onc1ick = c]icked: egw 記 

tr .appendChi1d(td) : 


ナ 
b.appendChi1d(tr) : 








Dut(3, 3, BLACK) : 
Dut(4, 4, BLACK) : 
Dut(3, 4, WHITE) : 
put(4, 3, WHITE) : 
update( ) : 


function update() { * ゃ て 3 
var numWhite = の 9 の, numBlack = 9: 


for (var x = の 9 : x <8 : x++) { 
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for (var y= の 9 : y<8 : y++) { 
1f (datalLx]Ly] == WHITE) { 
numWh1te++・ 
け 
1f (datalx][y] == BLACK) { 
numBlack++: 


document . getElementById( "numBlack") .textContent = numBlack: 
document . getElementById( "numWhite") .textContent = numWhite: 





var blackF1ip = canF1ip(BLACK): 
var whiteFlip = canFlip(WHITE ) : 


1f (numWhite + numBlack == 64 || (!blackF1ip && !whiteF1ip)) { 
showMessage(" ゲ ー ム オー バー?) 
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else if (!blackF1ip) { 
showMessage(" 黒 スキ ッ プ "): 
myTurn = false: 


1 
else if (!whiteF1ip) { 


showMessage( " 拍 ス キッ プ ?): 
myIurn = tFUe: 

J 

else { 
myTurn = !myTurn: 

け 

1f (!myTurn) { 
SetTimeout(think, 1999): 





function showMessage(str) { ゃ と 
document . getElementById( "message") .textContent = str: 
SetTimeout(function () { 
document . getElementById("message") .textContent = "": 


J, 20909) : 
J 
/ た 
* 盤 上 の セル クリ ッ ク 時 の コー ル バ ッ ク 関 数 
メ / 
function clicked(e) { を 穫 り 


if (!myTurn) {  // PC 考え 中 


Feturn : 










varid=e.target.id: を 婦 
parseInt(1d.charAt(4)): 
var ]〕 = parseInt(1d.charAt(5) ): 





Var 1 










var flipped = getF]ipCells(1, ], BLACK) 
1f (flipped.l1ength > 9) て { 

for (var k=@ : k<flipped.1ength : k++) { | 

put(flipped[k][9], fl1ipped[k][1], BLACK): 












} 
put(1, ], BLACK) : 
uDdate( ) : 








216 


* (1i,]) に color 色 の 駒 を 置く 

/ 

function put(1, ], color) { 
var c = document . getElementById("cel1"+ ュ キオ ]): 
c.textContent = " 倫 ": 


C.CclassName = “cel1 ”" + (color == BLACK ? "black" : “white”"): 
datali」][]] = color: 





/ 
*x コン ピュ ー タ 思考 関数 
メ / 
function think() { 15 
var highScore = -1999: 
var PX = -1, py = -1: sa 


Or CVAFP メニ 共 : XX ぐ 8 ・ x+ す +})f 


for (var y=9:y く 8 : y++) { 


var tmpData = copyData( ) : 

var fl]ipped = getFlipCells(x, y, WHITE) : 

1f (flipped.1ength > 9) { 

for (var i = の 9 : i く <f1ipped.1ength : i++) { | wa 

var p = f]ipped[i][9] : 
var q = fl1ipped[i][1]: 
tmpDataLp」Lq] = WHITE: 
tmpDatalx」Ly] = WHITE: 
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var score = CalcWeightData(tmpData) : 
1† (score > highScore) { 


highScore = Score: こ 18| 
PX ニ X, Py = ツア: 


1† (Dx >= 9 8&&py >= の ) { 
var fl1ipped = getFlipCells(Dx, py, WHITE) 
1† (flipped.length > 9) { 
for (var k = の : k く flipped.1ength : k++) { 
put(f1ipped[k][9], f1ipped[k][1], WHITE): 


} 
put(px, DPy, WHITE): 
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届 


uDdate( ) : 


J 
/ 大 
* 重み づけ 計算 
メ / 
function calcWeightData(tmpData) て こ 20 
Var SCore = 9 の : 
for (var x = の : x<8 : x++) { 
for (vaF V= の 9 の:y く <8 : y++) 
1† (tmpDataLx」[y] == WHITE) { 
score += WeightData[x][y] : 
け 
J 
J 
return SCOre: 
J 
/ 
*: 凍 デー プル デー タ を コピ ー 
/ 
function copyData() { を 
var tmpData = []: 
for (Var X = の 9 : xX ぐ 8 .: x++) { 
tmpData[x] = []: 
for (var y= の : y<8 : y++) { 
tmpDatalx][y] = data[x][y] : 
J 
J 
Feturn tmpData : 
J 
/ 
* 挟 め る 駒 が ある か ? 
メ / 
function canF1ip(col1or) { 22 


for (var x = の 9 : x < 8 : x++) 
を OPCWPW デ 生 ザー も うず 
var fl1ipped = getFl]ipCells(x, y, color): 
1f (flipped.l1ength > 9 の) { 
return tFrue: 


J 


Feturn falSe: 
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/ 
* (1,]) に 駒 を お いた と き に 駒 を 挟 め る か ? 
メ / 
function getF1ipCe1l1s(1, ], color) { に 23 
if (data[i][]] == BLACK || data[i][}] == WHITE) {  // すでに 駒 が ある 
Feturn []: 





// 相手 を 挟 め る か 、 左 上 、 上 、 右 上 、 左 、 右 、 左 下 、 下 、 右 下 と 順番 に 調査 
WE 衝 ま たき 上 も で ト 。m) 上 の で も キー キー ま 9 上 ト を も ま >1.11 を 013 も 111: 
var result =[]: 
for (var D= の 9 : p< く dirs.length : p++) { 

var fl]ipped = getFlipCellsOneDir(1, ], 

dirs[p」[9」, dirs[p][1], color): 

FeSult = result.concat(fl1ipped) 

け 


Feturn reSult: 


/ 

* (i,]) に 有 駒 を お いた と き に 、(dx, dy) 方 向 で 駒 を 挟 め る か ? 

メ / 

function getF1ipCe11sOneDir(1i, ]j, dx, dy, color) { 26| 
Var X = 1 + dQX: 

ee 
vary=J]+ dy: 


var f]iped =[]: 


4 が すれ も 間 322: た まみ すま 1 
datalx][y] == color || dataLx]JLy」 == の) { 
// 盤 外 、 同 色 、 空 な ら fa1se 


return []: 





fliped.push([x, y]), を 


while (true) { 

X += ニ dxX: 

y += dy: 

if (x く の 1|y く < の 9 の |1Ix>7|ly>71|| dataLxjLy」 == @) { 
// 盤 外 、 空 な ら fa1se 
return []: 

J 

if (data[x][y] == co1or) { // 挟 め た ! 


Feturn fl11ped: 








回 回 回 四 半 
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}) else { 
fl1iped.push([x, y]): 





く / SCF1Dt> 
く /head> 
く body onl1oad="init( ) "> 
く h2> 
未 (あな た ) : <span id="numB1ack"></span> 枚 
折 (PC) : <span id="numwhite"></span> 枚 
く /h2> 
く table 1d="board"></tab1e> 
く h2 1d="message "></h2> 
く /body> 
く /html> 





( 54 ソー スコ ー ド 解説 ) 


使用 し て いる 広域 変数 は 以下 の と お り で す 。 


使用 し て いる 広域 変数 
を う ! 説明 
WeightData 重み づけ (どこ に 優先 し て 石 を お く か ) 計算 用 の 配列 
datga 蟹 還 に お ける 石 の 配置 状態 を 保持 する 配列 


BLACK = ] 訪 血 data に 置か れ た 石 ( 黒 ) を ] で 表現 
WHITE = ら 盤 正 data に 置か れ た 石 ( 白 ) を ら で 表 現 


myTurn 目 分 の 番 か 否 か 


今回 は 関数 の 数 が 多い の で 順番 に 見 て いき まし ょ う 。 





15 ゲー ム や 神経 衰弱 と 同じ よう に 8x8 の 盤 を 作り ます 。 回 で 縦 軸 を i、 横 軸 を j と し て 二 重 の for 文 を 使っ て 
td 要素 と data を 初期 化し て いま す 。 

一 次 元 配 列 data の 様子 を 次 に 示し ます 。 石 が 置か れ て いな い 場 所 は 0、 時 が 置か れ た 場所 は 1、 白 が 置 
か れ た 場所 は 2 と し て 管理 し て いま す 。 た と えば data[31[3]1 は 黒 な の で 、[「 datal3113 に 1」 と な り ま す 。 
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8X8 の マス 目 を つく る 


J=0  J=1  J=2  J=3 J=4 J=5 J=6  J=7 
data | data | data | data | data | data | data | data 
[O][0] | [O][1] | [O][2] | [O][3] | [01[4] | [O][5] | [O][6] | [0][7] 
data data data | data 
[1][0] 貞 員 | 遇 [ll4] 貞 [ll6]| HI7] 


data | data | data | data | data | data | data | data 
[ZI[O] | [ZIH] [ZI[21 1 [ZI[3] | [71[41 1 [7][5] | [7][6] | [7][7] 





回 で は 、 最初 の 4 つの 石 を 配置 し て update() を 呼び 出し て いま す 。 





3EWUIeeEIC16 


この ゲー ム は 人 間 と コン ピュ ー タ が 交互 に 石 を 配置 し て いく の が 基本 で す が 、 石 が 置け な い 場 合 は 相手 に 
順番 を 譲る 必要 が あり ます 。 ま た 、 す で て 石 が 置か れ た り 、 双 方 が 同時 に 石 を 置け な く な っ た りす る と ゲー ム 
オー バー に な り ま す 。 こ の よう に さま ざま な 状況 に 対処 する 必要 が あり ます が 、 そ れ を 処理 し て いる の が update() 
関数 で す 。 

update() 関 数 は 初期 化 直後 や 石 を 配置 し た と き に 呼び 出さ れ ま す 。 回 で 、 盤 に 置か れ た 白 の 数 numWhite 
と 置 の 数 numBlack を 数 え 、| document.getElementByIld( numBlack ).textContent=numBlack | と 続く 行 
で 、 枚 数 を 画面 に 表示 し て いま す 。 

次 の 回 の 部 分 が 興味 深い と ころ で す 。canFiip は 引数 の 石 を 盤 に 置く こと が で きる か ( 三 ほ か の 色 を 挟む こと 
が で きる か ) を 返す 関数 で す 較 。 た と えば 、 黒 を 配置 で きる 状態 で も われ ば blackFlip が true と な り ま す 。 


var blackF1ip = canF1ip(BLACK) : 
var whiteFlip = canF1ip(WHITE): 


族 で は 、 ゲ ー ム オー バー、 ス キッ プ の 判定 を 行い ます 。 円 と 黒 の 数 の 合計 が 64 に な る 、 も し く は 、 白 も 黒 も 置 
け な い 場合 は ゲー ム オ ー バ ー と な り ま す 。 





・ 粒 < 
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1† (numWhite + numBlack == 64 || (!blackF1ip && !whiteF1ip)) { 
showMessage(" ゲ ー ム オー バー") 


回 は 、 石 を 置く 順 答 を 判定 する 処理 で す 。 


else if (!blackF1ip) { や の ) 
showMessage(" 黒 スキ ッ プ "): 
myTurn = false: 


け 

else if (!whiteF1ip) { 
showMessage( " 白 ス キッ プ "): 
myTurn = tFUGe: 

} 

else { 
myTurn = !myTurn: を で C) 

} 

1† (!myTurn) { ゃ を 〇 ) 
SetTimeout(think, 1999): 

け 


も し 、 blackFlip が false で あれ ば め ⑳ め 、 黒 が 置け な い の で 黒 が スキ ッ プ と な り 相 手 の 番 (|「myTurn = false」) 
と な り ま す 。 逆 に 、 曰 が 置け な けれ ば ⑤、 自分 の 番 (| myTurn = true」 ) と な り ま す 。 そ れ 以 外 の 場合 は @、 
順番 を 交代 し ます 。 

| は 論理 合 定 を 行う 演算 子 で 、true は false に 、 false は true に 変換 きれ ます 。 た と ぇ ば 、 


myTurn=!myTurn: 


の よう に 記述 する と 、 myTurn の 値 が true 一 false 一 true 一 false と 順番 に 変化 し ます 。 覚え て お 〈 と 便利 な 小 
技 の 一 つ で す 。 

目 分 の 番 で な いと き (ImyTurn) は @⑥、 コ ンピュータ に 1 秒間 考え る フリ を させ ます 。 

思考 アル ゴリ ズム が シン プル な た め 一 瞬 で 処理 が 終わ り 、 ゲ ー ム っ ぽく な ら な いた めで す 。 





kl| ShowMessage 


引 至 で 与え られ た 文字 列 を 2 秒間 だ け 表 示し ます 。 





phio| clicked(e) 


この 関数 は 玉 の init 関数 で td 要素 の イベ ント ハン ドラ と し て 登録 きれ た も の で す 較 。 myTurn が false の と き 
(ImyTurn) は 、PC が 思考 中 (の フリ ) な の で 何 $ せ ず に 戻り ます 太 。 

胃 の |varid =etargetid」 で は 、 ど の td が クリ ッ ク さ れ た か 調べ る た め の id を 取得 し て いま す 。 こ れ は init 
関数 の 國 で 設定 され た 内 容 で す 。 

田 の 処理 で 縦 ・ 横 の 座標 を 求め 、 そ こ に 黒 を 置い た と き に 反転 する 石 を 配列 で 求め て いま す 。 


var 1 = parseInt(1d.charAt(4)) : 
Var ] = parSseInt(1d.charAt(5) ) : 
var fl1ipped = getFlipCells(1i, ], BLACK) 


続く 文 で は 、 反 転 す る 石 が 0 より 多い 場合 、 つ まり 反転 する 石 が あっ た 場合 、 以 下 の コ ー ド で を の 石 を 反 
転 き させ 、 そ の 場所 に 黒石 を 置い て いま す 。 


1f (fl]ipped.length > 9 の 9) { 
for (var k= の 9 : k く flipped.1ength : k++) て { 
put(f1ipped[k][9], f1ipped[k][1], BLACK) : 
ナ 
put(1, ], BLACK) : 
update( ) : 


yh4| Dut(i, 」 color) 





座標 に color 色 の 石 を 置き ます 。 ポイ ント は 以下 の 行 で 石 の 色 を 設定 し て いる と ころ で す 。 


c.className = "cel1 " + (color == BLACK ? "black" : "white") 


| (color == BLACK ? black : white )|」 は 三 項 演算 子 で す (P81 「3-3-5 条件 式 - 三 項 演算 子 」)。 
冒頭 の CSS (style 要素 ) の 園 に は 、 以下 の よう な セレ クタ が 宣言 され て いま す 。 TavaScript か ら className 
を 動 的 に 設定 する こと で 、 セ レク タ を 切り 茜 え て いま す 。 


回 較 較 遇 還 
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td.black { 
color: black: 


J 
td.white { 

color: white: 
J 


つま り 、 以 下 の よ うに HTML で 記述 し た の と 同じ 効果 を 実現 し て いま す 。 


く td class="ce]] black"> 倫 </td> ゃ 黒石 
く td class="ce]1 white"> 鍛 </td> ゃ 白石 





phs| think() 


この ゲー ム の 肝 と な る コン ピュ ー タ の 思考 ルー チン で す 。 と いっ て も る 処理 内 容 は シン プル で す 。 こ の ゲー ム で 
は 4 隅 を 取る と 圧倒 的 に 有利 に な る こと は ご 存じ で し ょ う 。 で あれ ば 、 そ の 4 隅 の 周囲 に は な る べく 石 を 置か な い 
ほう が よい こと は 類推 で きる と 思い ます 。 こ の よう に 盤面 の 場所 ご と に 優先 度 を 設定 し 、 その 合計 値 が 一 番 大 きく 
な る よう な 場所 に 石 を 配置 する と いう の が 今回 実装 し た アル ゴリ ズム で す 。 場所 ご と の 優先 度 は 広域 変数 
WeightData 國 で 設定 し て いま す 。 


場所 こと の 優先 度 を 変数 で 設定 





コン ピュ ー タ は 円 で す 。 思考 ルー チン の 概要 は 以下 の よう に な り ま す 。 


① 64 マス 中 で 白 を 置け る 場所 を 探し 、 そ こ に 白石 を 置い た 時 の 状態 を 再現 する 
② その 状態 に お いて 優先 順位 の 合計 値 (白石 の ある 場所 の 点 の 合計 ) を 求め る 
③) 優先 順位 の 合計 値 が 最大 に な っ た 場所 に 石 を 置く 
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順 を 追っ て 見 て いき まし ょ う 。 ま ず 、 田 で は 64 マ ス の すべ て の 場所 を for 文 の 二 重 ル ー プ を 使っ て 調べ ます 。 


fOor (var X = の : X く 8 : X++) { 
for (var y= の 9 : y< く 8 : y++) { 

var tmpData = copyData(): を で の 

var f1]ipped = getF1]ipCe11s(x, y, WHITE) : で B) 

1f (flipped.1ength > 9) { 

for (var 1 = の 9 : + く < く f1]ipped.1ength : i++) て { 

var p = f]ipped[i][9] : 
var q = flipped[i][1] : 
tmpData[Lp]」[q] = WHITE: 
tmpDatalLx]Ly] = WHITE: 


(の copyData0 は 現在 の data を コピ ー し た も の を 返し ます 。 こ れ は 「 仮 に この 場所 に 白 を お いた と き に どう な 
る か 」 と いう 状態 を 再現 する た め の 仮 デ ー タ tmpData を 作る た めで す 。 

の | var fhpped = getFlipCells(x, y, WHITE)」 で 、 (x, y) 座標 に 白 を 置い た と き に 反転 する 石 の 配列 
を 求め ます 。 石 が ある 場合 、 つ まり | (fipped.length > 0)」 の 場合 は 、 仮 デ ー タ tmpData に 値 を 設定 し ます 。 
ここ まで が 前 述 の 思考 ルー チン ① の 部 分 で す 。 

傘 に 、 軸 で 合計 点 を 計算 し ます 。 こ れ が 思考 ルー チン ② で す 。 


var Score = CalcWeightData(tmpData) : 
1f (score > highScore) { 

highScore = Score: 

PX ニ X, Dy = ツ : 


思考 ルー チン ⑧③ は 、 上 の コー ド で |「score > highScore」 を 比較 し て いる 部 分 で す 。 そ を の 値 が ハイ スコ ア よ 
り 大 きい 場合 、 す な わ ち 今 の 打ち 手 の ほ う が よ り 高 得点 の と き は 、 現在 の (x, y) 座 標 を px と py に 保存 し て お き 


ます 。think 関数 の 冒頭 陣 で 、|px = -1, py = -1」 と 初期 化し て いる の で 、 両方 が 0 以上 と いう こと は () ど 


こ か に 石 を 置け た こと を 意味 し ます 男 。 よ っ て 、px と py が 0 以上 だ っ た と き に は 、 そ の 場所 に 白 を 置き ます 。 


回 回国 
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1f (Dx >= 9 8&& py >= 9 の) { 

var fl]ipped = getF]ipCells(px , py, WHITE) 

1f (fl]ipped.l1ength > 9) { 
for (var k=@ : k く flipped.1ength : k++) { 

put(f1ipped[k][9], f1ipped[k][1], WHITE) : 

J 

} 

put(Dx , Dy, WHITE) : 


は じじ が コン ピュー の 感 考 ケー チン シン で す 。 


3 包 上 EK ん sjEaldDEIEI6MGiloDEIED 





引数 で 与え られ た 盤面 デー タ (2 次 元 配列 ) の 優先 順位 の 合計 値 を 求め て 返す 関数 で す 。 白 の 置か れ た 
場所 の 重み を score に 足し て その 合計 を 返し て いま す 。 





3 回 上 0145EIEI@ 


優先 順位 の 合計 値 を 計算 する 場合 に は 、 仮 に 白 を 置い た と き に 、 そ れ に よっ て 石 が ひっ くり 返っ た 状態 を 再 
現す る 必要 が あり ます 。 ひ っ 〈《 り 返っ た 石 を 元 に 戻し な が ら 、 都 度 す べ て の 場所 を 調べ る 実装 方 法 $ あ り ま す 
が 、 処 理 が 面倒 に な り を うだ っ た の で 、 現 在 の 状態 を コピ ー し て 使い 捨て る 手法 を と る こと に し まし た 。 data 配 
列 を tmpData 配列 に コピ ー し て いる だ け で す 。 


2l canFlip(color) 


盤面 に 引数 の 色 の 石 を 置け る か 和 否 か を true か false で 返し ます 。 getFlipCells(x, y, color) 関数 を 使っ て 座 
標 (x, に 石 を 思 い た と き に 反転 する 数 を 求め 、 そ れ が 0 より 大 きい 場合 に true を 返し て いま す 。 


Esl getFlipCells(i, j, color) 





ij) 座標 に color の 石 を 置い た と き に 反転 する 石 の 配列 を 返し ます 。 

まず 、 す で に 石 が 置か れ て いる 場合 は 挟 め な い の で 、 因 で 空 の 配列 [] を 返し ます 。 

次 の 固 は 、 石 を 置け る 場合 の 処理 で す 。 石 を 置い た と き に 挟 め る 方 向 は 以下 の 図 の よう に 8 方 位 と な り ま す 。 
つま り 、 石 を 挟 め る か 否 か 判断 する に は 8 つの 方 位 に つい て 調べ る 必要 が ある の で す 。 





さら に 、 石 を 挟 め る た め に は 、|「 その 隣 に 異な る 色 が ひと つ 以 上 並ん で いて 、 か つ 、 そ の 並び の 先 に 自分 と 
同じ 色 が 存在 する 」 必要 が あり ます 。 途中 で 石 が 置か れ て いな か っ た り 、 盤 の 外 に 出 て し まっ た りす る ケー ス も 


考慮 する 必要 が あり ます 。 ひ と つの 関数 で すべ て を 処理 する と 複雑 に な り を うだ っ た の で 、 あ る 方 向 で 挟 め る か 


判定 する 処理 は 別 の 関数 getFlipCellsOneDir 団 に 任せ る こと に し まし た 。 
ょ っ て 、 こ の 関数 で は 、 各 方 向 を 配列 dirs 格納 し 、for 文 を 使っ て 方 向 ご と に 石 を 挟 め る か 否 か を 判定 する 
だ け に し て いま す 。 


本 間 に 論 表 相 粗 に W。 抽 を た まる か もこ も 本 ーー 人 きた キー も 1 上 60。 13。 [も 133・ 
var result = []: 
for (vaF D= の 9 : p< く dirs.]ength : p++) { 
var fl1ipped = getF1ipCel11sOneDir(i, ]j, dirs[p][9], dirs[p][1], co1or): 
Fesult = result.concat(f1ipped) 
J 


Feturn FeSult: 


result に 反転 し た 座標 が 格納 され ます 。concat は Array メソ ッ ド で 、 別 の 配列 と 結合 する 処理 を 行い ます 。 





piel getFlipCellsOneDir(i, j, dx, dy, color) 


を 起点 と し て 、(dx, dy) 方 向 に 、color 色 の 石 で 挟 め る か を 返し ます 。 順番 に 石 を 見 て 行く 必要 が ある 
の で 、 そ の 座標 を (X, y) と し て いま す 較 。 右 方 向 に 調べ る 場合 、 す な わ ち 、dx=1, dy=0 の と き に xy が どう 変 
化す る か 、 そ の 様子 を 以下 に 示し ます 。 


右 方 向 (dx=1, dy=0) に x,y の 変化 を 調べ る 場合 





回 間 国 遇 還 
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まず 、 と な り が 同じ 色 、 盤 の 外 、 石 が な いと いっ た 場合 は 単に 空 配列 を 返し ます 因 。 


本 すす 2V Sh まあ た 注 衝 た 
datalx]Ly] == color || dataLx][y] == 9) { 
// 盤 外 、 同 色 、 空 か ら fa1se 
Feturn []: 


そう で な けれ ば 、 別 の 色 の 石 が その 方 向 に 隣接 し て いる こと に な る の で 、 較 で 、 そ の 石 の 座標 を 仮に 配列 
fliped に 格納 し て お きま す 。 


f1iped.push([x, y]): 


あと は 、 較 で 、 そ の 方 向 を 順番 に 見 て いく こと に な り ま す 。 


while (true) { 

X += ニ dxX: 

y += dyi: 

1f (x く の 9||y く 9 の |1x>7|ly>7|| dataLx]Ly] == 9@) { 
// 盤 外 、 空 な ら fa1se 
Feturn []: 

ナ 

if (data[x][y] == color) { // 挟 め た ! 
return †l1iped: 

}) else { 
fl1iped.push(Lx, y]): 


|x += dx] と |y += dy」 で ひと つ 先 に 進め ます 。 同様 に 盤 外 や 空 に な っ た ら 挟 め な か っ た と いう こと な の 
で 空 配列 を 返し ます 。 そ の 座標 に 同じ 色 が あっ た 場合 は 挟 め た こと に な る の で 、 配 列 fhiped を 返し ます 。 それ 
以外 の 場合 は 、 別 の 色 が 連続 し て いた こと に な る の で 、while 文 の 実行 を 継続 し ます 。 

この ゲー ム の 説明 は 以上 で す 。 | コン ピュ ー タ と 対戦 する ] と いう 例 と し て 取り 上 げ て み ま し た 。 





コン ピュ ー タ を 強く し て みよ う 


上 の 例 で は 重み づけ の 配列 WeightData を 固定 と し て 処理 し て いま す 。 実際 に は 4 隅 を と っ た ら 、 そ 
の 周囲 の 優先 度 も 高く な る は ず で す 。 つ まり 、WeightData は 状況 に 応じ て 途中 で 変化 し た ほう が よ 


り 強 い ア ル ゴ リ ズム に な る は ず で す 。 自分 な り に 工夫 し て 、 よ り 強 い コ ンピュータ に 育て て くだ さい 。 
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S-) Dungeon 


[迷路 の よう に 入り 組ん だ ダン ジョ ン を 進ん で モン スタ ー と 対決 する 」、 よ く あ る 
ゲー ム の ] シー ン で す 。 そ ん な 状況 を 再現 する ゲー ム を つく っ て み ま し た 。 ち な み 。 
に 迷路 は 毎回 ラン ダム に 作成 され ます 。 ム 





いい 、 
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この ゲー ム で 学ぶ こと - 、 ーー ーーーー Pa 
es 上下 左右 スク ロー ル ゲ ー ム に 慣れ る 
e 述 路 の 目 動 生成 を 行 つ 
e CanvaSs の リー ジョ ンク リッ プ の 手法 を 知る 
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Lcek's ぃ rtke coAcs ! 


く !DOCTYPE html> 
く html> 
く head> 
く meta charset="UTF-8"> 
く style> 
#maZe { 
w1dth: 999px: height: 699Dpx: 
touch-action: none : 
J 
#START { 
DoSit1on: absolute : 
left: 299Dx: 
toD: 299Dx: 
J 
く / style> 
く SCF1Dt> 


"USe Str1Ct"・ 


var W= 31, H= 31, GAMECLEAR = 1, GAMEOVER = 2: 
var Cctx, keyCode = の 9 の, maze = [], player, aliens =[]: 


var timer = NaN, status = 9 の : 


var Scroller = new Scroller() : 
Player.Dprototype = Scroller: 


Alien.prototype = scroller: 


/ 
* スク ロー ル 処 理 オ ブ ジ ェクト 
/ 
function Scrol1l1er() {  e 軸 


this .doScrol1 = function () { 
1f (this.dx == 9 && this.dy == の ) { 


FetuFr: 


1† (++this.Scrol1Count >= 5) { 
this.x = this.x + this.dx: 
this.y = this.y + this.dy: 
this.dx = 9 の: 
this.dy = 9 の: 


this.scrol1Count = 9 の: 
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this 


.getScrol11X = function () { 


return this.x * 59 + this.dx テ this.sScrol1Count x 19: 


this.getScro11Y = function () { 


/ た 


return this.y * 59 + this.dy x* this.scrol1Count x 19: 


x 宇 入 公 オ プ ジ ェ クト コン スト ラク タ 


x/ 
funct1on 


this. 


this 
this 
this 
this 
this 


this 


Player(x, y) { e レ 3 
2 

2 ac 寺 

.dx = 0 の: 

.dy = の: 

.dir = の : 
.SCrOl1Count = 6 の: 


.update = function () { 

this.doScro11(): 

1f (this.scrol1Count > の @) { 
Feturn: 


1† (this.x ==W-28&&this.y ==W- 2) 人 { 
clearInterval(timer): 
status = GAMECLEAR : 
document . getElementById("bgm”) .pause() : 


FeDpa1nt( ) : 
J 
this.dx = の: 
this.dy = の: 


var nx = 9, ny = の: 
Switch (keyCode) { 


CaSe 3/: nx = -1: ny = の : 
this.dir = 2: 
break : 

CaSe 38: nx = の : ny = -1: 
this.dir = 9 の : 


較 
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break: 
CaSe 39: nxX ニ +1: ny = の: 
this.dir = 3: 
break: 
CaSe 4 の 9: nx = 9: ny = +]: 


this.dir = 1: 
break: 
J 
1† (maze[this.y + ny][this.x + nx] == 9@) { 
this.dX = nx: 
this.dy = ny: 
) 


this.paint = function (gc, x, y, w, h) { 
Var img = document.getE]lementById("hero" + this.dir): 
gc .drawImage(1mg, xX, y, W, h): 


/ 
* 瑞 オ ブ プ ジ ェ クト コン スト ラク タ 
メ / 
function Alien(x, y) { e 只 3 
this.X = X: 
this.y = y: 
this.dx = 9 の : 
this.dy = 9 の: 
this.dir = の : 
this.scro11Count = 9 の : 


this.update = function () { 
this .doScro11 ( ) : 


// 衝突 判定 
var diffX = Math.abs(player.getScro11X() - this.getScro11X() ) : 
var diffY = Math.abs(player.getScro11Y() - this.getScro11Y()): 
1† (diffX <= 49 && diffY <= 49) { 

clearInterval (timer): 

Status = GAMEOVER : 

document.getElementById( "bgm") .pause( ) : 

FeDa1nt( ) : 
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// 次 の 移動 先 


var gapx = player.Xx - this.x: 


Var gapy = player.y - this.y: 
Switch (random(4)) { 
CaSe の: 
this.dx =gapx > の 7? 1 : -1: 
this.dir = (this.dx == 37) ?2 2 : 3: 
break : 
CaSe 1: 
this.dy = gapy > 9 2? 1 : -1: 
this.dir = (this.dy == 38) 2 の : 1: 


break: 
default: 

this.dx = 9: 

this.dy = 9 の : 

break : 


this.paint = function (gc, w, h) { 
Var img = document . getElementById("alien” + this.dir): 
gc .drawImage(1mg, this.getScro11X(), this.getScro11Y(), w, h): 


function random(v) { 
Freturn Math.floor(Math.random() * V): 


function init() {  e 避 3 
var maze = document.getElementById("maze"): 
ctx = maze.getContext( "2d”): 
ctx.font = "bol1d 48px sans-serif"・ 


createMaze(W, H): 

player = new Player(1, 1): 

[new Alien(W - 2, 1), new Alien(1, W - 2)]: 
FeDa1nt( ) : 


alienS 


function go() { を 
window. onkeydown = mykeydown : 
window.OnkeyuD = mykeyuD : 


び 1 


・ 桁 4 
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Var maze = document .getElementById( "maze"): 

mmaZe .OnmOUSedOown = mymouSedown : 

maZe .OnmOUSeUD = ニ ykKeyuD : 

maze.Oncontextmenu = function (e) { e.preventDefau1t(): }: 
maze .addEventListener('touchstart', mymousedown) : 
maze.addEventListener('touchend', mykeyup) : 


timer = setInterva1(tick, 45) : 
document .getElementById( "START") . styl1e.display = "none": 
document.getElementById("bgm”") .pl1ay(): 


/ 
た 入 も ーー クン 
た / 
function tick() { 
player.update( ) : 
for (var i= の 9 の : 1i く aliens.1ength : i++) { 
aliens[i] .update( ) : 


J 
FeDa1nt( ) : 
J 
/ 
* 貴 :w、 高 さ :h の 迷路 生成 
x/ 
function createMaze(w, h) { を 中 
for (var y=@ : y<h : y++) { 
maze[y] = []: 
for (var x = の : x < w : x++) { * で 3 
mazelyjLx] = (x == 9||x == w-1||y == 9||y == h-1) ? 1 : 9@: 
J 
J 
fOL (War テス 2 7:V マ hhー 2 >: V*= 2) イ *E】 
for CVar X \.2 > X く wW = 2 ・X *= 2) † 
mazely」Lx] = 1: 


// 最上 段 は 上 下 左右 、 そ れ 以 外 は 下 左右 
Var dir = random((y == 2) 2?2 4 : 3): 
WE DAーーー ダ ) 

Switch (dir) { 


CaSe 9: Dy++: break: 
CaSe 1: DX--: break: 
CaSe 2: DX++: break: 


CaSe 3: Dy~--: break: 
J 
maze[py」Lpx] = 1: 
J 
J 
function drawCircle(x, y, r, color) { 10 


ctx .f111Style = color: 

ctx .beginPath( ) : 

の を 案 、 あ が C( 光 。。 と 、 の ひ の 。 at も thN、PT * メ )) 
放す る まま よん よく 


function repaint() { 11 


// 背景 クリ ア 
ctx .†111Style = “black": 
ctx .f1i11Rect( の 9, 9, 999, 699): 


// クリ ッ プ 領域 設定 

Ctx . SaVe( ) : 

ctx .beginPath( ) : 

ctx .arc(399, 399, 399, 9, Math.PI * 2): 
半 だ まま お を. よ * 


// 迷路 描画 
ctx .†T111Style = "brown": 
ctx.translate(6 x* 59, 6 x 59): 
ctx .translate(-1 x* player.getScrol1X(), -1 x* player.getScro11Y( ) ): 
OF (CVSP XX. きく 簡  X す ) て 
for (VaF y= の 9 の:Vy く < く H : y++) { 
if (maze[y][x] == 1) { 
ctx .f111Rect(x x* 59, y x 59, 59, 59): 


J 
for (var 1 = の : 1+ く aliens.1ength : 1++) { 
aliens[1].pa1nt(ctx, 59, 59): 


び 1 
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ctx . restore( ) : 


// 地図 描画 
ctx .T111Style = "#eeeeee": 
ctx .†111Rect(659, 9, 259, 699): 


Ctx . SaVe( ) : 
ctx .translate(679, 399): 
ctx .f111Style = "brown": 
for (var x = の @: x < W: x++) { 
for (var y = 9: y <H: y++) { 
1f (mazely][x] == 1) { 
CEX すす 1 は ReC も EK プーーー ナー チー まき > 


) 
drawCircle(player.X * 7 + 3, player.y * 7 + 3, 3, "red"): 
for (var i = の : 1+ く aliens.1ength : i++) { 
drawCircle(aliens[i].x x 7 + 3, aliens[i].y * 7 + 3, 3, "purple"): 


J 


Cctx . FeSstore( ) : 


// コン トロ ー ラ 描画 
ctx .drawImage(arrows, 679, 79, 299, 299): 
Var ax = -199, ay = -1099: 
Switch (keyCode) { 
CaSe 39: ax = 839: ay = 179: break: 
CaSe 4 の 9: ax = 77 の : ay = 239: break: 
179: break: 
CaSe 38: ax = 779: ay = 129: break: 


CaSe 3/: ax = 719: ay 


J 


drawCircle(ax, ay, 39, "yel1low"): 


// 主人 公 描 画 と メッ セー ジ 
player.paint(ctx, 399, 399, 59, 59) 
ctx .f111Style = "yellow": 
1† (status == GAMEOVER) { 

ctx .f1illText("GAME OVER", 159, 299): 
}) else if (status == GAMECLEAR) て { 

ctx .f1illText("GAME CLEAR", 159, 299) : 


// キー& マ ウス 押下 の イベ ント ハン ドラ 
function mykeydown(e) { 


J 


keyCode 


= e.keyCode: 


function mykeyup(e) { 
= の : 


keyCode 





function mymousedown(e) て { 13 
Var mouseX = !isNaN(e.offsetX) 2? e.offsetX 
var mouSseY = !isNaN(e.offsetY) ? e.offsetY 


J 


く / scr 
く /head> 


OUSeX 一 三 // の : 


OUSeY -= 179: 
1f (Math.abs(mouseX) > Math.abs(mouseY) ) { 
keyCode = mouseX く 9 2 37 : 39: 

}) else { 
keyCode = mouseY く 9 2 38 : 40: 


1Dt> 


く body onload="init( ) "> 


く !-- Thanks to httDp : //takao-suenobu.com/ & http: //dova-s . ]D/ --> 


く aud1O Src="Emergency .mD3” 1d="bgm” 1oop="1oop "> く /audio> 
く canvaS 1d="maze” w1dth="999" height="699 "></canvas> 


く 1mg 
く 1 mg 


く 1mg 
く 1mg 
く 1mg 
く 1 mg 
く 1mg 
く 1mg 
く 1mg 
く 1mg 
く /body> 
く / html> 


1d=”START” src="start.png” onclick="go() ">< く br/> 


1d=”"arrOwS” SrcC="arFOwS.Dng” style="display:none" /> 


1d="hero9" 
1d="hero1" 
1d="hero2" 
1d="hero3" 
1d="alien9" 


1d= ニ "alien1“ 
1d="al1ien2" 
1d="alien3" 


Src="hero9.png” style="display:none" /> 


Src="hero1 .png” style="display:none”" /> 


Src="hero2.png” style="display:none”" /> 


Src="hero3.png” style="display:none" /> 


Src="alien9.png" 
Src="alien1 .Dpng" 
Src="alien2.Dng" 
Src="alien3.png" 


style="display :none” /> 
Style="d1isplay:none” /> 
style="display:none”" /> 
style="display:none” /> 


・ e.touches[9] .clientX: 
・ e.touches[9」 .clientY: 
1f (679 < mouseX && mouseX < 879 && 79 < mouseY && mouseY < 279) { 


び 1 


・ < 
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(5-5-1 | ソー スコ ー ド 解説 ) 


EE まま も も ま も も も も も も も も も も も も も も も も も も も も に も も も も も も も に も に も に に に も に も も も に も も に も に も に も に も も も も も も も も も まま えま まま まま まま まま まま まま まま まま まま まま まま まま ネネ ネネ ミネ ネネ ミネ ミネ ネネ スネ まま まま まま まま まま まま まま まま る まま お る まる も る おお る る お お お 


使用 し て いる 広域 変数 は 以下 の と お り で す 。 


使用 し て いる 広域 変数 


節分 













説明 










timer タイ マー 
ゲー ム の 状態 、 ク リア = ニ 1、 ゲー ム オ ー バ ー =2 
スク ロー ル 処 理 す る オブ ジェ クト 、 Player と Alien の プロ ト タ イ プ 


の 2 補任 ゴリ 7 


迷路 を 作成 する アル ゴリ ズム は た くさ ん あり ます が 、 今回 は その 中 で も 最も シン プル な 棒 倒 し 法 を 使用 する こ 
と に し まし た 。 簡単 に 説明 する と 、 格子 状 に 柱 を た て て 、 その 柱 を 4 方 向 の どちら か へ 倒し て いく こと で 迷路 を 作 
成す る と いう 方 法 で す 。 乱 数 を 使用 する の で 実行 する た びに 異な る 迷路 が 生成 され ます 。 そ の 処理 を 行っ て い 
る の が 話 の createMaze(w, h) 関数 で す 。 ア ル ゴ リ ズム は 非常 に シン プル で す 。 迷路 デー タ は 2 次 元 配 列 と し 
て 格納 し 、 璧 を 1 通路 を 0 と し て いま す 。 








棒 倒し 法 に よる 迷路 作成 





まず 回 の for 文 で 、 上 下 左右 の 避 を 1 に し ます 。 


for (var y = の 9、:y く h : y++) { 
mazely] = []: 
for (var x = の : x < く W : x++) { 
mazely」[x] (x == 9||x == w-1||y == 9||y == h-1) ? 1 : 9: 


次 に 回 の for 文 で 、 以 下 の よ うに ひと つ 置 き に 柱 を 立て て 行き ます 。 前 ペー ジ の 図 左 の 状態 で す 。 


TOr (VaF Y= ニ 2:V く hh=-2 3 y+=2){ 
TOT (VaFr X デ ご 2:X く wWw…=-2: x+=2)†{ 
mazely」[x] = 1: 


あと は 、 最 上 段 の 柱 (| y == 2] の と き ) は 上 下 左右 4 方 向 の どちら か 、 そ れ 以 外 は 下 ・ 左 ・ 右 の 3 方 向 の 
どちら か に 柱 を 倒し ます 。 柱 を 倒し た 場所 は 壁 に し ます 。 ほ か の 柱 が 倒れ て いる と ころ に は 別 の 柱 を 倒さ な いよ 
うに する と より 複雑 な 迷路 が 生成 され ます 。 





シマ ペー シル シン = に ラプ 」 の 


信 路 は 碁盤 日 杖 の デー タ と し て 管理 し て いま す 。 上下 左 右 に 移動 する 際 に 隣 の マス に ジャ ンプ し て 移動 す 
る 実装 だ と 、 動 き が カク カク し て ぎこちない も の に な っ て し まい ます 。 そこ で 、 隣 の マス に 動く まで を 5 等 分 し て 、 
作 々 に 移動 きせ る こと で 、 ス ムー ズ に 動く よう に し まし た 。 

主人 公 は オブ ジェ クト と し て 実装 し て いま す が 、 座 標 に 関連 する プロ パテ ィ は 以下 の と お り で す 。 


主人 公 の プロ パテ ィ 












4 ロリ A セ と 説明 


(dx, dy) に よる 移動 方 向 と 、 右 に 移動 する 際 の 様子 を 以下 に 示し ます 。 





回 
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移動 方 向 
(dx , dy)=( の , -1) 


(X,Y) 
(dx , dy)=(-1, の 9) キー Ip ーー* (dx,dy)=(1,9) 


(dx , dy)=(9, 1) 


右 に 移動 する 様子 


GA ー* (dx,dy)=(1,9) 


SCFrOl1Count 1 一 ーーーーーーーーーーーー 一 一 ーー 一 


2 テーーー ナ ーー 一 タレ ーーーーー レ ーーーーー ト ーー 
3 ーーーーーーーーーーー 一 ーーーーーーーーーーー 
4 トーーーーーーーーーーーーーーーー 一 ーー 


っ トーーー ニ ーーーーー デ ーーーーーーーーーーー ャ | 





この ゲー ム で 移動 する の は 主人 公 Player だ け で な く 〈《、 敵 Alien の オブ ジェ クト も 同様 に 移動 し ほす 。 そこ で 、 
共通 する 処理 を Scroller と いう オブ ジェ クト に まとめ 、 prototype と し て 参照 する こと に し まし た 。 を その 様子 を 以下 
に 示し ます 。 


Player オプ ジェ クト 、Alien の オブ ジェ クト は Scroller オブ ジェ クト を prototype と し て 参照 する 


Player オブ ジェ クト 


Scroller オブ ジェ クト 
mo prototype 


Alien オプ ジェ クト 


(12,4) DrOtOtYyDe 


(=1 9) 





う 3 回 figol【:】 ルン た ー ン 4 ト 





Scroller オブ ジェ クト の 実装 は 以下 の と お り で す 。 


function Scroller() { 


回 還 固 四国 





this .doScro11 = function () て で e の ) 
1f† (this.dx == 9 && this.dy == 9) { 
FetuFrh: 
} 


1f (++this. scro11Count >= 5) て 
this.x = this.x + this.dx: 
this.y = this.y + this.dy: 
this.dx = の : 
this.dy = 9: 
this.scro11Count = 9 の : 


this.getScro11X = function () { で B) 
return this.x * 59 + this.dx x* this.scro11Count x 19・ 
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this.getScro11Y = function () { を で C) 
return this.y x* 59 + this.dy x* this.scro11Count x 19: 


doScroll メソ ッ ド 

スク ロー ル 用 カウ ンタ scrollCount を 増加 きせ ます 。(dx, dy) が と も に 0 の と き は 何 $ も せ ず に return し ます 。 を 
の 値 が 5 以上 に な っ た 場合 、 一 コマ 移動 きせ る の で 、 自 分 の 座標 (x, y) に (dx, dy) を 加え て 、 カ ウン タ と (dx. 
dy) を 0 で 初期 化し ます 。 


getScrolIX メソ ッ ド 
現在 の x 座 標 を 返し ます 。1 マ ス 50 ピ クセ ル 分 な の で 座標 は [this.x * 50| と な り ま す 。 さ ら に カウ ンタ が 5 


で 1 マス 、 す な わ ち カウ ンタ ] で 10 ピ クセ ル 分 の 移動 に な る た め 、 そ の 分 を 加算 し て いま す 。 


で getScrolIY メソ ッ ド 
y 座 標 の 値 を 返し ます 。 実装 は x 座 標 と 同じ で す 。 
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コロ EN/1 レ ルン シテ スト 


Player オブ ジェ クト の 実装 は 以下 の と お り で す 。 


funct1on 
this 


this. 


this 
this 
this 
this 


this 





Player(x, y) { 
の 信二 を 

Re か か 

.dX = の 

.dy = の: 

.dir = の : 
.SCrOl1Count = 9: 


.update = function () { や の) 


this.doScro11() : 
1† (this.scrol1Count > の 9) { 
Feturn: 


1f (this.x ==W-28&&this.y ==W- 2) て { 


clearInterval(t1mer) : 
status = GAMECLEAR・ 


document . getElementById(”"bgm”) .pause() : 


FeDa1nt( ) : 
ナ 
this.dx = 9 の: 
this.dy = の: 


var nx = 9, ny = 9 の: 
switch (keyCode) { ゃ で 


CaSe 3/: nx = -1: ny = 9 の: 
this.dir = 2: 
break: 

CaSe 38: nx = の : ny = -1: 
this.dir = の: 
break: 


CaSe 39: nX ニ =+]1: ny = 9 の: 


this.dir = 3: 
break: 
casSe 4 の 9: nx = の : ny = +1: 
this.dir = 1: 
break : 


) 


if (maze[this.y + ny][this.x + nx] == の) { ゃ で 5) 


this.dx = nX: 


this.dy = ny: 


this.paint = function (gc, x, y, w, h) { を で (F) 
Var img = document.getElementById("hero" + this.dir): 
gc .drawImage(1mg, xX, y, w, h): 


update メソ ッ ド 

⑧ の this.doScroll() で scrollbar オブ ジェ クト の カウ ンタ scrollCount を 増やし ます 。 こ の 値 が 0 より 大 きい 場 
合 、 ス クロ ー ル 中 な の で 以降 の 処理 は 行わ ず return し ます 。 

⑥ | (this.x == W -2 && this.y == W - 2)」 の と き は 、 迷 路 右 下 に 到着 し た の で ゴー ル と し ます 。 

⑥@) で は 、keyCode の 値 に 応じ て (nx, ny) と dir の 値 を 更新 し ます 。 

の | (mazelthis.y + nylthis.x + nx] = ニ = 0)」 が 成立 する 場合 は 移動 先 の 場所 が 通路 な の で 、 (dx. dy) 
を 更新 し ます 。 


⑤)Daint メ ソ ッ ド 
主人 公 の img オ ブ ジ ェクト を 取得 し 、 座標 (x, y) に 大 き さ (w. h) で 描画 し ます 。 


| コ EWIT:1a レ ョ ルン テッ ント 





Alhen オ ブ ジ ェクト は 散 の キャ ラク タ で す 。 


function Alien(x, y) て { 
th1S.X = X: 
this.y = y: 
this.dx = の: 
this.dy = 9 の : 
this.dir = の : 
this.scro11Count = 9 の : 


this.update = function () { を で ② 
this .doScro11() : で B) 


// 衝突 判定 
var diffX = Math.abs(player.getScro11X() - this.getScro11X()): ゃ eG) 
var diffY = Math.abs(player.getScro11Y() - this.getScro11Y()): 


四 NF 
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1if (diffX <= 49 && diffY <= 49) {{ で e 〇 
clearInterval(timer) : 
StatusS = GAMEOVER: 
document . getElementById("bgm") .pause(): 
TeDa1nt( ) : 


// 次 の 移動 先  e⑤ 
var gapxX = player.x - this.x: 
var gapy = player.y - thiSs.y: 
Switch (random(4)) { 
CaSe の : 
も h19。 有 OX EBIDOC 人 W 7 1 >: < 
this.dir = (this.dx == -1) ? 2 : 3: 
break: 
CaSe 1: 
this.dy =gapy > の 2? 1 : -1: 
this.dir = (this.dy == -1) ? 9 : 1: 
break : 
defau1t: 
this.dx 
this.dy 
break: 


_ 和 
⑤ ぐ ⑤ 


this.pannt = function (gc, w, h) { 
Var img = document .getElementById("alien” + this.dir): 
gc .drawImage(1mg, this.getScro11X(), this.getScrol11Y(), w, h): 


(の update メソ ッ ド で は 、 まず ⑤ の this.doScroll() で 、 scrollbar オブ ジェ クト の カウ ンタ scrollCount を 増やし 
ます 。 


その 後 、 主 人 公 キ ャ ラク タ と の 衝突 判定 を 行い ます 。 

@⑥ 〇 の Math.abs() は 絶対 値 を 求め ' る メソ ッ ド で す 。x 方向 の 差分 と y 方 向 の 差分 が と も に 40 以下 に な っ た と き 
⑥ に 衝突 ほし て 、 ゲ ー ム オー バー の 処理 を 行い ます 。 

⑥ の 移動 先 で は 、 徐々 に 主人 公 に 近づく よう Alien の 移動 先 を 求め て いま す 。 gapx は 主人 公 の x 座 標 か ら 
敵 の x 座 標 を 引い た 値 で す が 、 この 値 が 正 の 場合 、 主 人 公 が 右 に いる こと に な る の で 、 移 動 方 向 dx は 1 と し 
て いま す 。 た だ 、 毎 回 確実 に 近づく と 難易 度 が 高く な りす ぎる の で 乱数 で 調整 し て いま す 。 





canvas の コン テキ スト を 設定 し 、 createMaze(W, H) を 呼び 出し て 迷路 デー タ を 作成 し て いま す 。 を そし て 、 主 
人 公 、Ahen と オプ ジェ クト を 作成 し て いま す 。 こ の 段階 で は ゲー ム は まだ 開始 し て いな いこ と に 注意 し て くだ き 
い 。 ゲ ー ム は START ボタ ン が 押さ れ て go() が 呼び 出さ きれ て か ら 始 まり ます 。 

この ょ うに 、START ボタ ン の 押下 で は じ め て ゲー ム が 開始 きれ ます が 、 これ に は 理由 が あり ます 。HTML/ 
JavaScript で 実装 る され て いる ゲー ム の 多く は スマ ホ で も 動作 し ます 。 従量 課金 契約 の 場合 、 大 量 の デー タ を 
受信 する と 高額 な 通信 料 が 課さ れる 可能 性 が あり ます 。 「HTML の ペー ジ を 閲覧 し た だ け な の に 、 知 ら な い 
間 に 映 像 や 音声 の ダウ ン ロ ー ド が 行わ れ 高 額 な 料金 が 請求 きれ た | と いう 状況 が 発生 し な いよ う 、 ユ ー ザ ー 
の 操作 に 応じ た 場合 で し か 音声 が 再生 きれ な いよ うに な っ て いる 携帯 端末 が 存在 し ます 。 

この よう な 端末 の 場合 、onload の よう に 自動 的 に 呼び 出 き れる コー ル バ ッ ク 関 数 の 中 で BGM 再生 用 の コー 
ド を 記述 し て も 音楽 の 再生 が 行わ れ ま せん 。 スマ ホ で も で きる だ け PC と 同じ 挙動 に な る よう に し た か っ た の で 、 
明示 的 に ユー ザー が START ボタ ン を 押下 し た と き に ゲー ム が 開始 され る 仕様 に し まし た 。 


キー、 マ ウス 、 タ ッ チ 用 の イベ ント ハン ドラ を 登録 し て いま す 。 以下 の 行 は タッ チ の 長押 し に よっ て コン テキ 
スト メニ ュー が 表示 され る 人 動 を 防止 する た め の も の で す 。 





maze .Oncontextmenu = function (e) { e.preventDefau1t(): }: 


その 後 、 setInterval で メイ ン ル ー プ の tick を 開始 し 、 START ボ タン を 非 表 示 に し て 、 BGM の 再生 を 開始 
し いま す 。 


timer = SetInterval1(tick, 45): 
document. getElementById( "START") .style .display = "none": 
document.getElementById("bgm") .pl1ay(): 


らち な み に 、 イ ベン ト ハ ンド ラ を init() で な 〈、go() の 中 で 登録 し て いる の に は 理由 が あり ます 。 も し init() の 中 で 
イベ ント ハン ドラ を 登録 し て し まう と 、START ボタ ン 以 外 の 場所 が クリ ッ ク さ れる と 、 ゲ ー ム 開始 前 に も 関わ ら 
ず 、 イ ベン ト ハ ンド ラ が 実行 きれ て し まい ます 。 こ れ は 意図 する 挙動 で な は いた め 、 ゲ ー ム 開始 直前 の go() で 
登録 し て いま す 。 





ゲー ム の メイ ン ル ー プ で す 。Player と Alien の update() メ ソ ッ ド を 呼び 出し 、 repaint() で 再 描画 を し て いま す 。 


加 回 MM 回 
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3WelENUA の IIgcd【:16.4h'/ 十 雪 い )【】 遇 





円 を canvas に 描画 し ます 。 こ の ゲー ム で は 円 を 描く 処理 が 色々 な 場所 に 散見 され た の で 、 関 数 と し て まとめ 
ます 


3 コ 還 gieEilalt@ 


まず 背景 を 時 で 塗り つぶ し ます 。 ctx.save() で コン テキ スト を 保存 し ます 。 ctx.arc(…) で 円 を 描き 、ctx.clp() 
を 呼ぶ こと で クリ ッ プ 領域 を 設定 し て いま す 。 こ うす る と ctx.restore() が 呼ば れる まで 、 抽 画 処理 は この 円 の 中 
だ け に 限定 され ます 。 

この ゲー ム で は 常に 主人 公 は 中 心 に 描画 きれ ます 。 そこで 、 デ 迷路 を 主人 公 と 反対 側 に 動か すこ と で スク ロー 
ル 効 果 を 演出 し て いま す 。 を その 座標 系 を 移動 する 処理 を ctx.translate() で 行っ て いま す 。 あと は 二 重 ル ー プ で 
壁 の 部 分 を 茶色 で 塗り つぶ し 、 交 キ ャ ラク タ を 抽 画 し て いま す 。 

「// 地図 描画 ] 以降 で 、 画面 有 に ある 小さ な 地図 を 描画 し て いま す 。 こ れる も 同じ <〈 二 重 ル ー プ を 使い 、 小 き 8 
な 地図 を 描画 し て いま す 。 自分 を 赤色 で 、 敵 を 紫 で 描画 し て いま す 。 最 後に 、 主人 公 、 必要 に 応じ て メッ セー 
ジ を 描画 し て いま す 。 





hi2l mykeydown(e)、mykeyuD(e) 


押下 され て いる キー の コー ド を 広域 変数 keyCode に 格納 し ます 。 キ ー が 離れ た 時 は 0 を 代入 し ます 。 


3EWhMto0 に te【eta16= う 





マウ スク リッ ク や タッ チ 時 の コー ル バ ッ ク 関 数 で す 。 ひ と つの コー ル バ ッ ク 関 数 を マウ ス と タッ チ で 共用 する 
た め 、 以 下 の コ ー ド で 座標 位置 を 取得 し て いま す 。 


Var mouseX = !isNaN(e.offsetX) ? e.offsetX : e.touches[9」] .cl1ientX: 
var mouseY = !isNaN(e.offsetY) ? e.offsetY : e.touches[9」 .cl1ientY: 


jsNaN() は 数 値 で な いか 否 か を 返す 関数 で す 。 マ ウス が クリ ッ ク さ れ て いる 場合 は 、e.offsetX に 数 値 が 格 
綱 さ れ て いる の で 、 |「 lisSNaN(e.offsetX)」 が true に な り 、 e.offsetX の 値 が mouseX に 設定 され ます 。 数 値 で な 
い 場 合 は e.touches[OlclientX で タッ チ 座 標 を 設定 し て いま す 。 

実は 、 最 初 の バー ジョ ン で は 以下 の よう な コー ド を 合用 し て いま し た 。 


var mouSseX = e.offsetX | | e.touches[9] .c1ientX: 


e.offsetX が true と 判断 さき れれ ば その 値 を 、 そ を う で な い 場 合 は e.toucheslOlclientX を 使用 し ます 。 何 が 問題 


か 分 か り ま すか ? マウ ス の 座標 が 0 の と き 、 す な わ ち offsetX の 値 が 0 の と き を 考え て みて くだ さい 。0 は 条件 式 
と し て は false と な る の で 、 | の 右側 の 式 が 評価 され ます 。 マウ ス で 操作 し て いる の に タッ チ の プロ パテ ィ が 参照 
る れ て し まう の で す 。 

座標 値 が 得 ら れ た ら 、 ど の ボタ ン の 上 で 押さ れ た の か 判定 する 処理 へ 進み ます 。 ま ず 、 


1f (67 の 9 < mouseX && mouseX < 879 && 79 < mouseY && mouseY < 279) { 


で 座標 値 が 上 下 左右 ボタ ン の 領域 に 含ま れ て いる か 判定 し ます 。 正確 に 矢印 ボタ ン の 上 が クリ ッ ク さ れ て い 
る か 判定 する 必要 は あり ませ ん 。 対角線 を 引い て 大 雑 把 に 調べ れ ば 十分 で す 。 

左右 ボタ ン を 判定 する 場合 は 、 | (Math.abs(mouseX) > Math.abs(mouseY))」 を 評価 し ます 。Math.abs() 
は 攻 対 値 を 返す 関数 で す 。mouseX の 絶対 値 が mouseY の 絶対 値 よ り 大 きい 範囲 は 下 右 図 の よう に な り ま す 。 
ここ まで わか れ ば 、mouse 叉 の 値 が 原点 より 右 に ある か 左 に ある か 判定 する こと で 、 左右 どちら の ボタ ン か 判 
断 す る こと が 可能 に な り ま す 。 上 下 ボ タン も 同じ で す 。 


上 下 左右 ボタ ン の 領域 ( 左 ) mouseX の 絶対 値 が mouseY の 絶対 値 よ り 大 きい 範囲 ( 右 ) 


Math. abs(mouseX) > Math.abs(mouseY) 





迷路 の デザ イン を 変え て みよ う 


クリ ッ プ 領域 を 円 で は な く 、 ほ か の 形 に し て み ま し ょ う 。 ま た 迷路 サイ ズ を 変え て みた り 、 迷 路 作 成 の ア 
ルコ ゴリ ズム を より 複雑 な も の に 変え て みた り と いろ いろ 手 を 加え て み ま し ょ う 。 


還 
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kok qaowee ts kkts ? 





S- つ Saturn Voyager 


本 格 的 な GD り ゲー ム を つく る の は 大 変 で す 。 GU モデ ル を 作っ て 、 テク スチ ャ を 貼り 
付け て 等 々 、 さ ご さまざま な 負 理 が 必要 で す 。 し か し 、「 な ん ちゃ っ て 3D ゲー ム 」 で あ 
れ ば それ ほど 面倒 で は あり ませ ん 。 簡単 な 割 に は 実際 に 3D 空間 を 移動 し て いる よ 
つ な 形 党 を 覚え る と い ます 。 





この ゲー ム で 学ぶ こと 
e CgnvaS の 座標 軸 変 換 に な れる (画像 の 回 転 ) 
e 守 似 3D モ デル に 親しむ 
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Lek's ぃ rtEe coAes ! 


く !DOCTYPE html> 
く html> 
く <head> 
く t1tle>SaturnVoyager く / て t1t]e> 
く META charset="UTF-8"> 
く style> 
#SDaCe { 
w1dth: 899px: height: 899Dx: 
touch-act1on: none: 
J 
#START { 
pos1tion: absolute: 
left: 299Dx: 
tOD: 299DxX : 
J 
く / style> 
く SCF1Dt> 
"USe StFr1Ct"・ 
var SstarsS = [」, keymap = []: 


Var Cctx, sh1D, Score = 9, speed = 25, timer = NaN: 


function Ship(x,y) {  e 略 
| th1S.X = Xi| 
「 this.y = | 


| this.keydown = function (e) { 


keymap[e .keyCode] = true: | 
) | 
this.keyup = function (e) { * 
「 keymapLe .KkeyCode」 = false: 
EE | 
CEOS ES 3 
if (keymap[37]) { // 左 「 
th1s.xX -= 3 の: | 
}) else if (keymap[39]) { // 右 | 
th1s.X += 3 の: | 
| 
「 if (keymap[38]) { リプ 本 | ャ で! 
「 this.y -= 39: | 
| }) else if (keymap[49]) { / | 
| this.y += 39: | 


this.x = Math.max(-899, Math.min(899, this.x) ) : 
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this.y = Math.max(-899, Math.min(899, this.y)) : 





function random(v) { ゃ まう 
return Math.floor(Math. random() * V): 


function init() { ャ すき 
for (var 1 = の : ji く 299 : i++) { 
Stars.push({ 
X: random(899 * 4) - 1699, 


y: random(899 * 4) - 1699, 
Z: random( 4995) , 

Fr: random( 369) , 

W: 


random(19) - 5 
まま か 





Ship = new Ship(299, 299): 
onkeydown = ship.keydown : 






onkeyuD = ship.keyup: 







Var Space = document.getElementById( "space") : 
ctx = Space .getContext( "2d"): 

ctx.font = "29pt Aria1": 

repa1nt( ) : 







function go() { ゃ 】 
Var Space = document.getElementById( "space"): 
SDaCe . OnmOuSedown = mymouSedown : 
SDaCe . OnOUSeUD = ニ ymOuSeUD : 
Space .Oncontextmenu = function (e) { e.preventDefau1t(): }: 
Space . addEventListener( "touchstart', mymousedown) : 
Space . addEventListener( "touchend ' , mymouseuD) : 


document.body .addEventListener('touchmove ', function (event) { 
event.preventDefault( ) : 
}), false) : 


document.getElementBy1Id( "START") . sty1e .display = "none": 
document .getElementById( "bgm") .p1ay() : 
timer = setInterva1(tick, 59) : 
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function mymousedown(e) { テ 
var mouSseX = (!isNaN(e.offsetX) ? e.offsetX 


1if (Math.abs(mouseX) > Math.abs(mouseY)) { 
keymapLmouseX > の ? 37 : 39] = true: 

}) else { 
keymapLmouseY > 9 2? 38 : 49] = true: 


function mymouSeuD(e) { 
keymap = []: 


function tick() { を 
OF Va も 3 = 才 .・ 3 く 200 ・ 】+#+ す ) イ 
var Star = stars[i] : 
Star.Z -= SDe@d: に 
star.r += Star.W: 14 
ます て さも きた 、 え 区 も キ ) キ 


1† (Math.abs(star.x - ship.x) < 59 && 
Math.abs(star.y - ship.y) < 59) { 


// 衝突 ゲ ー ム オー バー 
clearInterval(timer) : 
timer = NaN: 


・ e.touches[9」] .clientX) - 4099: 
Var mouSseY = (!isNaN(e.offsetY) ? e.offsetY : 


e.touches[9] .clientY) - 499: 


document . getElementById("bgm”") .pause() : 


break : 
J 
// 通過 一 奥 へ 再 配置 
star.xX = random(899 * 4) - 1699: 
star.y = random(899 x* 4) - 1699: 
Star.z = 4995・: 


1† (SCOre++ % 1 の == 
SDeed ++・ 


J 


shiD.moVve( ) : 


Fepa1nt( ) : 





function repaint() { 17 
ctx .f111Style = "black": 
ctx .f111Rect(9, 9, 899, 809) : 





ひび! 


・ 洗 < 
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stars.Sort(function (a, b) |{ 
return D.z - a.Z: 






まう 2 





// 陣 石 の 描画 

for (var i = の 9 : 1 く 299 : i++) { 
var star = stars[i] : 
Var Z Star .Z・ 
Var x = ((Sstar.x - ship.x) << 9) / z + 499: 
var y = ((Sstar.y - ship.y) << 9) / z + 499: 
var S1ze = (59 << 9) / z: 
Ctx . SaVe( ) : 
ctx .translate(x, y): 
ctx .globalAlpha = 1- (z / 4996): 
ctx.rotate(star.r x* Math.PI / 189): 


ctx .drawImage(rockImg, -size / 2, -size / 2, size, Size) : 


Ctx . restore( ) : 





// uk: ア 
ctx . drawImage(Scope, 9, 9, 899, 899): 
ctx .f1i11Style = "green": 
ctx .fi11Text(('9999999′+ score) . s1ice(-7), 679, 69):  e*3 
1f (isNaN(timer)) { 
ctx .f1illText("GAME OVER", 315, 359): 


) 
く / SCF1Dt> 
く /head> 
く body onload="init( ) "> 
く !-- Thanks to http: //takao-suenobu.com/ & http://dova-s. jp/ --> 
く audio src="Escape .mD3”" 1d="bgm" 1oop="1oop "></audio> 
く canvaS 1d="space" width="899" height="899"></canvas> 
く img 1d="START” src="start.png" onc1ick="go() "><br/> ャ ーー 和 
< く img 1d="rockImg" src="rock.png" style="display :none" /> 
く 1mg 1d="SCope” Src="Scope.Dng” style="display :none" /> 
く /body> 
く /html> 


252 





(5-6- ソー スコ ー ド 解説 ) 


NN や NN ボキ ボキ ボド ドド ボド ギド ボボ ボボ NNWNW や N ボ 馬 人 ドド キキ ドド ネネ ドド ギド ドキドキ ドキ ボネ キネ キネ ネネ ボキ ボキ ネネ キネ キネ キキ ドキドキ ネギ ドド ボキ ドド ボネ キキ ネギ キネ ボネ キネ ボ ネネ ドド ネネ キネ ネギ ネネ キネ ネネ ネネ ネネ ネネ キネ キネ キネ キネ キキ ネネ キネ キネ キネ キキ ポキ ネネ キキ キネ ネネ キネ ドキ ネネ ネネ キネ ネネ ネネ ネネ ボネ ネ キネ ネネ キネ ボネ ネネ キネ キキ ネネ ネネ ネネ ドド ネネ ネネ ネギ ネネ ネネ ネネ ネネ ネネ ネネ ネネ ネネ キネ ネネ ネネ ネネ ネネ ネネ ボネ ネネ ネネ ボボ ネネ ボネ ネネ や ネネ ネネ ボネ ネネ ポキ ポポ ボネ ネネ ボネ ボネ ポポ ボネ ボネ ネネ ネネ ネネ ネネ ボネ ボネ ネネ ボネ ボ ネネ ポポ ボネ ボボ ポポ ボボ ポポ ネネ ボネ ネネ ネネ ネネ ポポ ネギ ポポ ポポ ボド ネ ネネ ポキ 


使用 し て いる 広域 変数 は 以下 の と お り で す 。 


使用 し て いる 広域 変数 


秋 数 














説明 


StarS 








う 回 filo6482 


自 機 オ ブ ジ ェクト を 作る た め の コ ンス トラ クタ で す 。 引数 x と y は 自 機 の 座標 で す 。 
メソ ッ ド と プロ パテ ィ は 以下 の と お り で す 。 


皿 x, y 
X と Y の 座標 値 を 保持 する プロ パテ ィ で す 。 それぞれ -800 か ら 800 の 範囲 を と り ま す 。 


回 KeydOwn, KeyuDp 

キー の 押下 状 胡 を 保持 する た め の メ ソ ッ ド で す 。 コー ド を みる と わか り ま す が 、 ど の キー が 押さ れ た か を 配列 
keymap に 記憶 し て いる だ け で す 。 キー が 押さ きれ た の で 、 自 機 を 動か す 処理 を 書き た い 衝 動 に 駆り られ る か も し 
れ ま せん 。 な ぜ 、 こ の メソ ッ ド の 中 で 自 機 を 移動 する 処理 を 行わ な いか 、 そ の 理由 を 考え て み ま し ょ う 。 


キー を 押し て いる 間 は 継続 し て 移動 させ る 


移動 の 継続 


キー の 押下 キー の リリ ー ス 


この よう な リア ル タ イ ム ゲ ー ム の 場合 、 キ ー が 押し て いる 間 は キャ ラク タ を 継続 し て 移動 きせ る こと が 普通 で 
す 。 リ アルタ イム ゲー ム で は 定期 的 に メイ ン ル ー プ が 実行 きれ ます 。 メ イン ルー プ の 中 で 都度 キー の 押下 状態 
を チェ ッ ク し て 、 押 下さ れ て いる と き に 移動 処理 を 行う と 、 キ ー 押 下 の 間 だ け 移 動 す る と いう 自然 な 動き が 実現 
で きる の で す 。 keydown に 移動 処理 を 書い て し まう と | キー を 押す た びに 、 ち ょ っ と だ け 移 動 す る 」 と いう 状態 
に が っ そし まう ぞ し ょ う 。 


回 回 回 測 還 
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ITOVG 
キー の 押下 状態 を 見 て 自 機 を 移動 し ます 。 左右 移動 の 処理 を 見 て み ま し ょ う 。 


if (keymap[37]) { // 左 
this.x -= 30: 

}) else if (keymap[39]) { // 右 
this.x += 30: 

} 

if (keymap[38]) { だ 
this.y -= 39: 

}) else if (keymap[49]) { // 下 
this.y += 30: 

け 


keydown, keyup で みた よう に 、 左 キ ー が 押下 され て いる と き に は keymap[37] が true に な り ま す 。 を そこ で 自 機 
の x 座 標 を 30 減 らし ます 。 こ の 値 を 調整 する と 自 機 が 動く 速 き を 制御 で きま す 。 右 、 上 、 下 、 す べ て 同様 で す 。 
左右 と 上 下 で は 正文 が 分 か れ て いま す 。 すべて の ケー ス を else で つない で いな いこ と に 注意 し て くだ さい 。 
これ は 、 左 と 上 が 同時 に 押さ きれ た と き は 左上 へ 、 と いっ た 斜め 方 向 へ の 移動 を 可能 に する た めで す 。 
最後 に 以下 の よう に Mathmax と Mathmin を 使っ て 変数 の 範囲 を 制限 し て いま す 。 


this.x = Math.max(-899, Math.min(899, this.x)) : 


この よう な 式 は 通常 の 計算 式 と 同様 に 内 側 か ら 見 て いき ます 。 ま ず 、「Mathmin(800, this.x) 」 で x と 800 の 
小さ い ほ う を 取得 し ます 。 こ れ で 上 限 が 800 に 制限 され ます 。 

傘 に |Mathmax(-800.…)] で 、 その 戻り 値 と -800 を 比べ て 大 きい 値 を 取得 し ます 。 こ の よう に 記述 する こ 
と で 、 下 文 を 使用 する こと な く 1 行 で 変数 の 範囲 を 制限 する こと が で きま す 。 ち ょ っ と 覚え て お く と 便利 な 小 技 で す 。 





3 回 Eate【jil62 


v ま で の 範囲 で ラン ダム な 整数 値 を 返し ます 。 


ゲー ム の 初期 化 を 行い ます 。 了 順 石 を 200 個 生 成 し 、 配列 stars に 格納 し て いま す 。 了 央 石 オ ブ ジ ェクト の 生成 
は 次 の コー ド で 行っ て いま す 。 





stars.puSsh( 
: Fandom(899 x* 4) - 1699, 
: Frandom(899 x 4) - 1699, 
・ random(4995) , 
: random( 369) , 
・ Fandom(19) - 5 











、- 


流 括 引 | 盾 ] で オブ ジェ クト を 作成 し 、|「 プロ パテ ィ 名 : プロ パテ ィ 値 :| で 、 プ ロ パ ティ や メソ ッ ド を 指定 で き 
た こと を 覚え て いま すか ? 忘れ て いる 人 は 「3-7-2 JavaScript で の オブ ジェ クト の 定義 方 法 ] (P102) を 読み 
直し て くだ さい 。 x, y , z は 了 石 の 初期 座標 値 で す 。 

了 石 は 、x,y と も に - 1600 か ら 1600 ま で の 和男 囲 、z は 0 か ら 4095 ま で の 和男 囲 に 配置 され ます 。r は 了 石 の 初 
期 角度 、W は 隅 石 の 回 転 す る スピ ー ド で す 。 すべて random で 求め て いま す 。 ち な み に 自 機 は z=0 の 平面 上 
を 移動 し 、 そ の 座標 は (xy) と な り ま す 。 

記 で 目 機 の オブ ジェ クト を 作成 し 、 キ ー 押 下 用 の イベ ント ハン ドラ を 設定 し て いま す 。 


Ship = new Ship(299, 2099): 
onkeydown = ship.keydown : 
onkeyup = ship.keyuD: 


あと は canvas の コン テキ スト に フォ ント を 設定 し 、 repaint() で 再 描 画 を 行っ て いま す 。 





国 の START ボタ ン の 押下 で 呼び 出さ れる 関数 で す 。 実際 に ゲー ム を 開始 する 関数 で す 。canvas に マウ 
ス や タッ チ の イベ ント ハン ドラ を 設定 し て いま す 。 

タッ チ で 指 を 動か し た と き に 、 ブ ラウ ザ に よっ て は 、 ゲ ー ム の 操作 で は な く 、 ゲ ー ム 画面 を 移動 する 操作 と 解 
秋 す る も の が あっ た た め 以 下 の コ ー ド を 追加 し まし た 右 。 


document . body . addEventListener( "touchmove', function (event) { 
event .preventDefault( ) : 
}, false) : 


タッ チ は 割 と 新しい 技術 要素 で ある こと も あり 、 ブ ラウ ザ に よっ て 人 挙動 が 異な る こと も 少なく あ り ま せん 。 しばら 
〈 く は 個々 の ブラ ウザ に 対処 する た め の コ ー ド を 書く 必要 が ある で し ょ う 。 
條 は 、 男 で START ボタ ン を 非 表 示 に し 、 BGM の 再生 を 開始 し 、 メイ ン ル ー プ tick を 開始 し て いま す 。 


piw tw wi 
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document .getElementById("START”) .style .display = "none": 
document . getElementById("bgm") .play(): 
timer = setInterval(tick, 59): 





hiil mymousSedown(G) 


マウ ス の 押下 され る 場所 に 応じ て 上 下 左右 キー が 押下 され た 場合 と 同じ 処理 を 行っ て いま す 。 内 容 は 
Dungeon の mymousedown(e) と ほとん ど 同 じ で す 。 


ゲー ム の 心臓 部 [し も いえ る メイ ン ル ー プ で す 。 
まず 画 の 


Star.Z -= SDeed: 


で 陸 石 の z 方 向 の 値 を speed 分 減ら し て いま す 。 す な わ ち 、 自 機 の 方 へ 随 石 を 近づけ て いま す 。 次 に 画 の 、 


Star.r += Star .W: 


で 、 陸 石 を 回 転 き せ て いま す 。 
次 の 男 が 衝突 判定 を 行っ て いる 箇所 で す 。 


1† (star.z < 64) { 

1f (Math.abs(star.x - ship.x) < 59 && 
Math.abs(star.y - ship.y) < 59) { 
// 衝突 ゲー ム オ ー バ ー 
clearInterva1(timer): 
timer = NaN: 
document . getElementById("bgm") .pause() : 
break: 

け 

// 通過 一 奥 へ 再 配置 

star.x = random(899 * 4) - 1699: 

star.y = random(899 x 4) - 1699: 

Star.Zz = 4995: 


| star.z く 64」 で 随 石 が ほぼ 自分 と 同じ 平面 に 到達 し た か 判定 し て いま す 。 を その 場合 、 き ら に x 座 標 と y 座 
標 が 至近 で あれ ば 衝突 し た こと に な り ま す 。 を その 判定 を し て いる の が 、 以 下 の 条 件 式 で す 。 


(Math.abs(star.x - ship.x) < 59 && Math.abs(star.y - ship.y) < 59) 


Math.abs() は 引数 の 絶対 値 を 求め ある メソ ッ ド で す 。 つ まり 隙 石 と 自 機 の x. y 座 標 の 差 が と も に 50 未満 の と き 
を 衝突 と みな し て いま す 。 衝突 し た 場合 は タイ マー と BGM を 止め て ゲー ム オ ー バ ー と し て いま す 。 衝突 し な か っ 
た 場合 は 、 目 機 の 動く 平面 を 通り 過ぎ た こと に な る の で 、 以 下 の よ うに 、 乱数 を 使っ て 一 番 奥 へ 了 大 石 を 配置 し 
て いま す 。 


// 通過 一 奥 へ 再 配置 

Star.x = random(899 * 4) - 1699: 
star.y = random(899 * 4) - 1699: 
Star.Zz = 4995: 


メイ ン ル ー プ で の 残り の 処理 男 は 以下 の と お り シ ンプ ル で す 。 


1† (score++ % 19 == 9 の) { 
SDeed ++: 

J 

ship.moVve( ) : 

repa1nt( ) : 


score を 増やし て 10 の 倍数 に な っ た ら speed を 増やし ます 。 こ れ に より ゲー ム を 継続 する と 徐々 に スピ ー ド が 増 
加 し ます 。 あと は shipmove() で 自 機 を 移動 きせ 、 repaint() で 画面 を 再 描画 し ます 。 





3 上 四 geFEllah4@ 


まず 背景 を クリ ア し ます 。 画 の 行 は 説明 が 必要 で し ょ う 。 


stars.Sort(function (a, b) { 
return Db.Zz - a.Z: 


す ナナ 5 


この 処理 は 随 石 を 遼 い 順番 に 並べ て いま す 。 な ぜ こ の よう な 処理 が 必要 か 考え て み ま し ょ う 。 と ころ で 、 ほぼ 
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同じ 大 き さ の 了 大 石 が 遠方 か ら 近 づい て くる 場合 、 以 下 の ひ の ふ た つの どちら が 自然 に 見 える と 思い ます か ? 


了 石 の 遠近 感 





静止 画 だ と わか り づ らい か も し れ ま せん が 、 実際 に 動い て いる 様子 を みる と 右側 の 方 が 自然 に 感じ られ ます 。 
これ は | 近く に ある も の が 前 面 に 描画 きれ て 、 奥 に ある も の を 隠し て いる | と いう 現実 世界 の 状況 と 一 致す る か 
ら で す 。 遠く 〈 の 小さ な 了 順 石 が 、 近く の 大 き な 了 石 の 前 に 描画 きれ る よう な こと は 現実 世界 で は 起こ りえ ませ ん 。 る を 
の 様子 を 以下 に 示し ます 。 





stars に は 200 個 の 了 頃 石 が 格納 る きれ て いま す が 並 び 順 は ラン ダム で す 。 興 の も の か ら 描 画 し て いけ ば 、 自然 
な 感じ に 描画 する こと が で きま す 。 そこ で 、 ZZ 軸 の 値 順に 並べ 奉 えて いた の で す 。 
田 は 了 央 石 を 捕 画す る 処理 で す 。 


// 陣 石 の 描画 
for (var i = の : i < 269 : i++) { 
var star = stars[i] : 


Var Z = Star.Z: 










X = ((Star.x - ship.x) << 9) / z + 499: 
var y = ((Sstar.y - ship.y) << 9) / z + 499: 
S1ze = (59 < く < 9) / z: 
Ctx . SaVe( ) : 

ctx .translate(x, y): 

ctx .globa1Alpha = 1- (z / 4996): で や B) 
ctx.rotate(star.r x* Math.PI / 189): 

ctx .drawImage(rockImg, -size / 2, -size / 2, size, size): 
Cctx .restore( ) : 


と 


x、yY、Z の 座標 値 の 計算 に 若干 の 工夫 が あり ます 。 

x か ら 見 て いき まし ょ う 。 目 機 か ら 眺 め た 様子 ( 自 機 を 視点 の 中 心 と し て ) を 描画 し た い の で 、 まず 、[「(star. 
x - Ship.x)」 で 陸 石 と 目 機 ほ と の 差分 を 求 ' ま す ④②。 た だ 、 モ デル と する 空間 は -1600 か ら 1600 ま で の 範囲 と いう 
粗い 男 囲 な の で 、 そ の まま ピク セル と し て 描画 し て も る 広がり が 生ま れ ま せん 。 

そこ で 、 | (Star.x - ship.x) くく 9)」 と し て 拡大 (512 倍 ) し て いま す 。 こ の 値 は いろ いろ た めし て 適当 に 設定 
し だ も の で す 。 

ここ で 、|1 くく 9] が な ぜ 512 倍 な の か は 説明 が 必要 で し ょ う 。 こ の 「<<」 は シフ ト 演 算 子 と いっ て 、 各 ビッ ト 
を 指定 され た 分 だ け 左 方 向 に シフ ト す る も の で す 。 今回 の 場合 は 9 ビッ ト 左 方 向 に 移動 し て いま す 。 

2 進数 は 桁 上 が りす る と 2 倍 に な り ま す 。 一 番 右 の ビッ ト が 1 だ っ た と き に 、 左 に 移動 する た びに 、2、4、8、 
16… と 増え る こと か ら も わか る と 思い ます 。 た と えば 、 6 は 二 進 数 で 110 で す が 、 左 に 9 個 移動 する と 以下 の よう に 
512 倍 さ れ て 3072 と な り ま す 。 


各 ビ ッ ト を 左 に 9 個 移動 


9999 9999 9』19 = 6 


1199 9999 9999 = 6X512 = 3972 





で は 、 な ぜ | ((Star.x - ship.x)・ 512)」 と 書か な か っ た の で し ょ うか ? 実は を の よう に 書い て も まっ た く 問 題 あ 
り ま せん 。 た だ 、 一般 的 に シフ ト 演 算 は 極め て 高速 に 実行 され ます 。「 ち ょ うど 500 倍 で な いと 困る ん だ 、 512 で 
は ダメ な ん だ | と いっ た 特に 強い こだわ り が な けれ ば 、 シ フト 演算 を 使う 選択 肢 も ある と いう こと を 紹介 し た か っ 
だ た の で 上 記 の よう な 実装 に し まし た 。 

次 に 、 512 倍 し た 値 を z で 割っ て いま す が 、 これ は 遠く の 了 大 石 ほど 画面 中 央 か ら の 差分 を 小さ くす る た め の 処 
理 で す 。+400 は 、800 x 800 と いう 捕 画 領域 の 中 心 を 原点 と する た め の も の で す 。y 軸 方 向 の 処理 も x 軸 方 向 
と まっ た だく 同 じ で す 。 


還 
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頃 石 の 回 転 描画 は canvas の 章 で 時 計 を 描画 し た と き と 同 じ 処理 で す 。save() で 現在 の コン テキ スト を 保存 
し 、translate(x, y) で (x, y) を 原点 に し 、 rotate() で 座標 系 を 回 転 し て いま す 。 
は 境 く の 了 大 石 ほど 暗く 描画 する た め の 処 理 で す 。 


ctx . globalAlpha = 1- (z / 4996): 


globalAlpha は これ か ら canvas に 描画 する 内 容 の 透明 度 (og 値 ) を 設定 する プロ パテ ィ で す 。 了 順 石 が 近く に 
ある 場合 Z は 小さ な 値 に な る た め 、globalAlpha は 1 に 近づき ます 。 すなわち 、 オ リ ジ ナ ル の 画像 に 近い 状態 
で 描画 きれ ます 。 

一 方 、 遠く に ある 場合 、 globalAlpha は 0 に 近づき 、 ほとん ど 透 明 (背景 の 里 に 溶け 込む 感じ ) に 描画 され 
ます 。 あ と は 、 照 準 器 の 画像 と スコ ア 、 ゲ ー ム オー バー 時 の テキ スト を 描画 し て いま す 。 

図 の 行 は 少し トリ ッ キ ー な の で 説明 を し て お きま す 。 


ctx .f1i11Text(('9999999'′+ score) . sl1ice(-7) , 679, 69): 


これ は スコ ア の 左 を 0 で 埋め て 描画 する た め の 処 理 で す 。 仮 に スコ ア が 123 と いう 数 値 だ っ た と し ます 。 文字 
列 と 数 値 の 足し 算 を 行う と 、 数 値 は 文字 列 に 変換 きれ 、 文 字 列 の 連結 が 行わ れ ま す 。 

すなわち |(0000000 + score)」 は 「0000000123」 と いう 文字 列 に な り ま す 。String.prototype.slice() は 文 
字 列 の 一 部 を 切り 出し て 返し ます 。 マ イナ ス の 数 を 指定 し た 場合 、 文 字 列 の 末尾 か ら 切 り 取 っ て 返さ きれ ます 。 
つま り 、 左 を 0 で 埋め た 文字 列 が 取得 で きる の で す 。 ゲー ム で は この よう な 表示 が よく 行わ れる の で 真似 を し て 
必 ま し だ 。 

以上 が 疑似 3D ゲー ム の 説明 で す 。 短い コー ド の わり に は それ っ ぱ ぽい 効果 が 演出 で き て いる と 思い ます 。 自 
分 が 学生 の ころ スペ ー ス ハリ アー と いう ゲー ム が 人 気 を 集め て いま し た 。 今 思う と 疑似 3D ゲ ー ム に 触れ た 最初 
の 機会 だ っ た の か も し れ ま せん 。 





苔 バ ラメ ー タ を 変更 し て 確認 し て みよ う 


ゲー ム を 入力 し た 後 で 、512 倍 (<<9) や speed と いっ た パラ メー タ を いろ いろ 変更 し て 、 そ れ が どの 
よう に 反映 され る か 確認 し て くだ さい 。 
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Funky Blocks 


いわ ゆる “ 沙 ち モノ 系 "ゲー ム の 一 例 と し て 作っ て み ま し た 。 縦横 方 向 に 同じ 色 が 3 
つ 以 上 揃 つこ 消え て 、 上 か が か ら ブ ロッ ク が 落ち て きま す 。 連鎖 する ほど 高 得点 と な り 
ます 。 
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この ゲー ム で 学ぶ こと 
* 本 格 的 な ゲー ム を 作る 
* 効果 音 の 再生 方 法 を 知る 
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Lek's ぬ rtke coAes ! 


く !DOCTYPE html> 
く html> 
く head> 
く title>FunkyBlocks</tit]e> 
く META charset="UTF-8"> 
く style> 
#CanVaS { 
w1dth: 899Dx: 
height: 699Dpx: 
touch-action: none: 
J 
#START { 
DoSition: absolute: 
left: 299Dpx: 
tOD: 299DX: 
J 
く / style> 
く SCr1Dt> 


"USe Str1ct"・ 


var Ctx, tilesS = [], moves = [], mIndex = 9, mCount = 9, times =[]: 

var timer = NaN, startT1ime = NaN, elapsed = 9, score = 9 の, bgimage , Sound: 

Var mouSeX = null, mouseY = null, mouseUpX = null, mouseUpY = nul1: 

Var mmeSsSage =[” , good", "very good", "super”",。 "wondeful!"。 "great!17 
"amaZ1ng"。 br1lliant!"。 "excellent!!”]: 


function rand(v) { 
return Math.f1oor(Math.random() * V): 


) 
function iterate(f) { "夫人 
for (var x = の 9 : x < 12 : x++) { 
for (var y= の 9 : y く 12 : y++) { 
f(x, y, tiles[x][y]) : 
J 
) 
) 
/ XX 
* タイ ルオ ブ ジ ェクト 
/ 
function Tile(x, y) { 2 
this.x = X: 
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this.y = y: 
this.DxX = X: 
this.Dy = y: 
this.count = 9 の : 
this.getX = function () { 
return this.x + (this.px - this.x) * (this.count) / 29: 
J 
this.getY = function () { 
return this.y + (this.py - this.y) * (this.count) / 29: 


J 

this.move = function (px, py, color) て { 
this.DX = DX: 
this.py = Py: 


this.color = color: 
this.count = 209: 
this.moving = tFue: 
moveS . Dush(this) : 

ナ 

this.update = function () { 
1† (--this.count <= の ) { 

this.moving = false: 


function init() { ee き 


// タイ ルオ ブ ジ ェクト の 生成 
For 6VaP X = X ぐ 12: XPk7 f 
tiles[x] = []: 
for (var y= の : y く 12 : y++) { 
tiles[xljLy] = new Tile(x, y): 


// 3 つ 連 続 し な いよ う 初 期 色 の 配置 
1terate(function (x, y, t) { 
while (true) { 
var 「 = rand(5): 
を て る 靖 も に G は OFP も X、 サザ 。 だ うう 
t.color = r: 
break : 


まき か 


wa 


sooi ヨ AMun コ | 7-G | NM/77 届 ロー : 豆 洋 < 


263 


264 


// 残り 時 間 初 期 化 


for (var i = の 9 : i < 15 : i++) { 


var t document.createElement( "img"): 
も 、SrC = "ttme デ キキ ャ デア pngr・ 


t1meSs .Dush(t) 


// Canvas 初 期 化 

bg1mage = document.getElementByTd("bgimage"): 
var canvas = document. getElementById( "canvas") : 
Ctx = canvas.getContext("2d"): 

ctx .textAlign = "center": 


Sound = document .getElementById( "sound"): 
FeDa1nt( ) : 


function go() { の る 
var canvas = document . getElementById( "canvas") : 
CanVaS . OnmOuSedown = mymouSedown : 
CanVaS . OnOUSeUD ニ ymOUSGeUD : 
canvas . addEventListener( "touchstart', mymousedown) : 
canvas . addEventListener( "touchmove ', mymousemoVe) : 
canvas . addEventListener( "touchend', mymouseuDp) : 


startT1me = new Date( ) : 
timer = setInterval(tick, 25): 


document.body . addEventListener('touchmove', function (event) て { 
event.preventDefau1t( ): 

}, false): 

document. getElementById( "START") . style.display = "none": 

document . getElementById("bgm") .play() : 


ナ 
/ 大 
* メイ ン ル ー プ 
*/ 
function tick() { "3 


// メッ セー ジフ ェ ー ド アウ ト 効 果 
mCount = Math.max( の 9, mCount - 1): 
1f (mCount == の 9) { 

mLIndex = 9 の : 


1† (moves.length > の @) { 


for (var i = の : i<moves.1ength : i++) { // タイ ル 移 動 


moves[i] .update( ) : 


) 


moOVeS = moves.filter(function (t) { return t.count != 9 }): 


1† (moves.length == 9) { 


Var S = removeTile() : 


ます を 村 。 本 を 
// 初回 or 連鎖 


// 移動 完了 
// タイ ル 消 去 


mIndex = Math.min(message.length - 1, mIndex + 1): 


mCount = 509: 


SCOTGe += S* 19+ mIndex x* S * 1099: 


SOund . DauSe( ) : 


SOund .CurrentTime = 9: 


Sound . play( ) : 


J 
fal11( ): 


elapsed = ((new Date()) . getTime() - startTime) / 1999: 


if (elapsed > 69) { 
clearInterval(t1mer) : 
timer = NaN: 

J 

FeDpa1nt( ) : 


function setColor(x, y, c) { 

var flag = true : 

3 です KK XX イ // 左 
var c の 9 = tiles[x - 2][y]. 
var c1 = tiles[x - 1][y]. 
flag &= !(c9 == c1 && Cc] 

J 

ます を 人 が 生 - 半 ): オ が 右 
var c の 9 = tiles[x + 2][y]. 
var c1 = tiles[x + 1][y]. 
flag &= !(c の 9 == c1 && c1] 

け 

人 旬 を 所 1 の たら 各 
var c の 9 = tiles[x][y - 2]. 
var c1 = tiles[Lx][y - 1]. 
flag &= !(c9 == c1 && c1 


mo 


CO Or : 
COlOr : 
ニニ の 


COloF: 
COlOr : 
な 3 


COlOr : 
COloOr: 
= ご で ): 


び 1 
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よー に 導 ま さ // トド 
var c の 9 = tiles[x]Ly + 2].color: 
var c1 = tiles[x][y + 1].color: 
flag &@= !(c9 == c1 && c1 == C): 


ナ 
return flag: 
け 
function mymousedown(e) て { で 者 
mouSeX = !isNaN(e.offsetX) ? e.offsetX : e.touches[9] .c1ientX: 
mouSeY = !isNaN(e.offsetY) ? e.offsetY : e.touches[9] .c1ientY 
ナ 
function mymousemove(e) { 人 
mouSeUpX = !isNaN(e.offsetX) ? e.offsetX : e.touches[9] .clientX: 
mouSeUpY = !isNaN(e.offsetY) ? e.offsetY : e.touches[9] .c1ientY 
J 
function mymouseup(e) { ご 合 】 
var sx = Math.floor((mouseX - 34) / 44): 
var sy = Math.floor((mouseY - 36) / 44): 
Var nx = SX, ny = SV: 
var mx = !isNaN(e.offsetX) ? e.offsetX : mouseUDX: 
var my = !isNaN(e.offsetY) ? e.offsetY : mouseUpY: 
1† (Math.abs(mx - mouseX) > Math.abs(my - mouseY)) { 
nhX + サ = (mxX - mouSeX > の 9) 2? 1 : -1: 
}) else { 
ny += (my - mouseY > 9) ? 1 : -1: 
け 
TK も を NRV みす も RS 導 は mM で - き 1 
tiles[Lsx][Lsy] .moving | | tiles[nx][ny] .moving) て { 
return 
J 
var c = tiles[sx][sy] .color: 
tiles[sx][sy] .move(nx, ny, tiles[nx][ny] .col1or): 
tiles[nx][ny] .move(sx, sy, て ): 
FeDpa1nt( ) : 
J 
function removeTile() { こ 10 


// 縦横 3 つ 以 上 連続 する タイ ル に remove フ ラグ を セッ ト 


for (var y=9 : y < 12 : y++) { // 横 方 向 
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var c9 = tiles[9][y] .color: 
Var COunt = 1: 
も の に も を ツ 汗 半生 タモ 半 に 科す まつ を う は 


var c1 = tiles[x][y] .co1or: 
1† (Cc の 9 != Cc1) { 

C の 9 = Cl: 

COunt = 1: 
}) else { 

1† (++cCount >= 3) { 


tiles[x - 2][y].remove 


tFUG : 
tiles[x - 1」Ly].remove = true: 


tiles[x - 9][y].remove = true: 


for (var x = の : x < 12 : x++) { // 縦 方 向 
var c9 = tiles[x][9] .col1or: 
Var COunt = 1: 
se 生 も jo 年 28 導 に 株 全 吉 9 数! 
var c1 = tiles[x][y] .color: 
1† (c の != C1) { 
C の = Cl]: 
COunt = 1: 
}) else { 
1† (++Count >= 3) { 


tiles[x][y - 2].remove = true: 


tiles[x][y - 1].remove = true: 
tiles[x][y - 9].remove = true: 


J 


var SCOre = の : 


1terate(function (x, y, t) { 1if (t.remove) { score++ } ): 


Feturn SCOrG: 


function fa11() {  // 落下 処理 ei 
for (var x = の : x < 12 : x++) { 
†fOr (Var y = 11。 SsP = 11: y >= の ・ y--, SD-~-) 人 { 
while (sp >= の 9) { 
1† (tiles[x]Lsp」.remove) { 


SD--: 


び 1 


・ * 欄 
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}) else { 


break: 
J 
ナ 
11 (y != sp) { 
var c= (sp >= 9 の) ? tiles[x][Lsp].color : rand(5): 
tiles[x][y].move(x, sp, Cc): 
J 
ナ 
J 
1terate(function (x, y, t) { t.remove = false: }) 
J 
function repaint() { 1 
ctx .drawImage(bg1mage, 9, 9): 
// タイ ル 
var 1mages = [block9, block1, block2, block3, bl1ock4]: 
1terate(function (x, y, t) { 
1† (!t.remove) { 
ctx .drawImage(1mages[t.color], t.getX() * 44 + 34, t.getY() * 44 + 36, 
42. 42) 
) 
け ) : 
/ メッ セー ジ 
ctx.font = "bo1d 89px sans-serif"・ 
ctx .fT111Style = "rgba(255。 255, 255。 " + (mCount / 59) + ")”: 
ctx .f1llText(message[mIndex] , 399, 399): 
ctx .f111Style = "white": 
1f† (isNaN(timer)) { 
ctx .f1llText("FINISH" , 359, 399): 
J 
と を ee た 
ctx .f111Style = "rgba(229, 133, 39, 59)": 
ctx.font = “bold 59px sans-serif" 
ctx.fT1illText(('9999999'+ score) . sl1ice(-7) , 689, 179): 
// 残り 時 間 
var index = Math.min(15, Math.floor(elapsed / (69 / 15))): 
ctx .drawImage(times[1index], 615, 327): 
J 
く / scr1Dt> 
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く /head> 
く <body onload="1nit( ) "> 
く !-- Thanks to http : //takao-suenobu.com/  & http : //dova-s . ]D/ --> 
く aud1O SrC="SOund.mD3”" 1d="sound "> く /audio> 
く aud1o Src="letsgo.mD3" 1d="bgm "> く / aud10> 
く canvaS 1d="canvas” w1dth="899”" height="699 "></canvas> 
く img 1d="START” src="start.png" oncl1ick="go() "><br/> 


び 


く 1mg 1d="bgimage” src="back.png" style="display:none" /> 
く 1mg 1d="block9" src="block9.png" styl1e="display :none" /> 
く img 1d="block1" src="bl1ock1 .png” style="display :none" /> 
く img 1d="block2" src="block2.png" style="display :none" /> 
く 1img 1d="block3" src="block3.png" style="display :none" /> 
く 1img 1d="block4” src="bl1ock4.png" style="display:none" /> 

く /body> 

く /html> 


・ WW 粒 < 





( 5-7-1 | ソー スコ ー ド 解説 ) 


の この の の の の の の の の の の の の で の の の の の の で の の の の の の る の の の の で の で の の の の の の の の の の の の の で の の の の の の の の で の の の の で の の の の の の の の で の で の の の の や の で の る の の の の の の の の で の で の の や の で や や で や や や で や やや や や や や や や や で や やや る や で や や か や で や 人 や 人 や や 人 や 人 や 人 や 人 や 人 人 人 や 人 や る 人 や や や や やや や や や や や や Seeeeeeooeoeeooeoe 


使用 し て いる 広域 変数 は 以下 の 通り で す 。 


使用 し て いる 広域 変数 


キッ 説明 


mlndex メッ セー ジ へ の イン デック ス ( ニ 何 連鎖 中 か を 保持 ) 
mCount メッ セー ジフ ェ ー ド アウ ト 効 果 を 演出 する た め の カ ウン タ 


SOund ブロ ッ ク が 消え た と き の 効 果 音 


mOuSeUDX マウ スリ リー ス 時 の XX 座標 
mouseUpY マウ スリ リー ス 時 の Y 座標 
meSsSsage メッ セー ジ の 配列 
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この ゲー ム で 中 心 的 な 役割 を する の は タイ ルオ ブ ジ ェクト で す 。 タイ ル は 以下 の よう に 2 次 元 配列 と し て 実装 
され て いま す 。 


タイ ルオ フジ ェクト 


tiles[x][y] 





ゲー ム の 進行 に 伴っ て タイ ルオ ブ ジ ェクト も 移動 する よう に 見 えま す が 、 実際 に は タイ ルオ ブ ジ ェクト は 動き ま 
せん 。 つ まり 、 仮 に (0.0) の タイ ル を 右 に 移動 きせ て も 以下 の よう に は な り ま せん 。 


実際 に は タイ ルオ ブ ジ ェクト は 動か な い (下図 の よう に は な ら な い ) 
tiles[9][9] tiles[1][9] tiles[9][9] tiles[1][9] 


《 朋 、 2 1,9) 
て い elej【:1 の の 


代わ り に 、 タ イル オブ ジェ クト の 色 だ け を 入れ 共 え て いま す 。 





タイ ルオ プ ブ ジ ェクト の 色 だ け を 入れ 替え て いる 


描画 位置 実際 の 位置 2 つの タイ ル が 入れ 替わっ て 見 える 様子 


(9,9) の (1,9) . 
りり ob 
D 
「 ]  ! オフ セッ ト 設定 


(9,9) (1,9) ce99 のり ) 
object1 ig - オフ セッ ト を 


徐々 に 減ら す 


(1,9) 
Object Object 
1 2 





(0.0) の タイ ル を 右 に 移動 する 操作 を 行っ た と し ます 。 こ の と き は (0.0) と (1.0) の 色 を 入れ 奉る えま す 。 し か し 、 単 
に 色 を 入れ替え た だ け で は 、 ス ムー ズ に 動く 視覚 効果 が 得 ら れ ま せん 。 そこ で 、 上 中 央 図 に ある よう に 描画 位 
置 の オフ セッ ト を カウ ンタ で 調整 し 、 入 れ 替 える 2 つの タイ ル に この 効果 を 適用 し て いま す 。 こ うす る こと で 上 右 
図 に ある よう に 2 つの タイ ル の スム ー ズ な 入れ 禁 え を 演出 し て いま す 。 

タイ ル は Tile オブ ジェ クト と し て 実装 し て いま す 詳 。 


function Tile(x, y) { 
this.X = X: 
this.y = y: 
this.DxX = X: 
this.py = y: 
this.count = 9 の: 
this.getX = function () { 
return this.x + (this.px - this.x) x* (this.count) / 29: 
J 
this.getY = function () { 
return this.y + (this.py - this.y) * (this.count) / 29: 
J 
this.move = function (px, py, color) て 
this.Dx = DX: 
this.py = py: 
this.color = color: 
this.count = 29: 
this.moving = true : 
moveSs . DuSsh(this) : 
ナ 
this.update = function () { 
1f (--this.count <= 9 の) { 
this.moving = false: 


オブジェク は 現在 の 座標 (x, )、 移動 先 の 座標 (px, py)、 移動 まで の カウ ンタ count を プロ パテ ィ と し て 持ち 
ます 。 getX と getY は 捕 画 座標 を 返す メソ ッ ド で す 。 count の 値 に よっ て オフ セッ ト を 調整 し て いま す 。count に 
0 や 20 と いっ た 値 を 代入 し て どん な 値 が 返る か 考え て みる と 理解 し や すい か も し れ ま せん 。 「move(px, py, 
color)] は タイ ル を 視覚 的 に 移動 きせ る メソ ッ ド で す 。 移動 先 の 座標 と 色 を 指定 し ます 。count を 20 で 初期 化 
し 、 moving フ ラグ を true に し 、 移動 タイ ル 格 納 配列 moves に 自分 を 挿 人 し ます 。update は カウ ンタ を デ ク リ 
メン ト (=] 減ら す ) し 、 0 に な っ た と き に フラ グ を false に 戻し ます 。 個々 の 処理 は それ ほど 複雑 で は あり ませ ん 。 
で は 主 な 関数 を 見 て いき まし ょ う 。 


回 回国 遇 還 
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引数 に 関数 オブ ジェ クト を 取り 、 すべ て の タイ ル に つい て を の 関数 を 実行 し ほす 。 こ の ゲー ム で は 、 3 つ 並 ん 
で いな いか 検査 する 、 個々 の タイ ル が 削除 対象 か 人 千 か 調べ る 、 個々 の タイ ル を 搬 画 する と いっ た 処理 を 行う 必 
要 が あり まし た 。 い ずれ も 2 重 ル ー プ を 使っ て すべ て の タイ ル を 処理 する 必要 が あり ます が 、 個 々 の 処理 内 容 
は 異な り し ます 。 そこ で 、 共通 部 分 で ある 2 重 ル ー プ の み を iterate(⑪) で 括り だ し 、 個 別 の 処理 を 関数 オブ ジェ ク 
ト で 指定 する よう に 実装 し まし た 。 こ れ に より 2 重 ル ー プ の 数 を 減ら すこ と が で きま し た 。 





まず 2 重 ル ー プ で タイ ルオ ブ ジ ェクト の 二 元 配列 を 作成 し ます 。 その後 で 、 各 タイ ル に 人 色 を 設定 し ます が 、 
最初 の 段階 で は 上 下 左右 に 3 つ 以 上 同じ 色 が な ら ば な いよ うに し な く 〈 く て は な り ま せん 。 を その 処理 を 行っ て いる の 
が 以下 の 部 分 で す 。 


iterate(function (x, y, t) { 
while (true) { 
var r = rand(5) : 
1f† (setColor(x, y, r)) { 
t.color = 「r: 
break: 


関数 オブ ジェ クト を 引数 と し て iterate を 呼び 出し て いま す 。 こ れ に より 、 す べ て の タイ ル 位 置 に つい て 関数 
が 呼び 出さ れ ま す 。 関数 オブ ジェ クト の 引数 は x 座 標 、y 座 標 、 タ イル オブ ジェ クト {となり ます 。 色 を 5 色 か ら 
西 数 で 選び 、 setColor で 色 を 設定 し ます 。 設定 で きた 場合 は true が か える の で 次 の タイ ル の 人 色 設 定 に 進み ま 
す 。 false が 帰っ た 場合 は 色 が 連続 し て いる の で 再度 乱数 の 生成 か ら 処 理 を 行い ます 。 こ の 関数 オブ ジェ クト 
が Il び 出さ れる 様子 は 、 コード を 見 て いる だ け で は 分 か り に くい の で デバ ッ ガ を 使っ て 動き を みる こと を お 勧め し 
ます 

次 に 残り 時間 の 画像 の 配列 を 作成 し 、times 配列 に 格納 し ます 。 あと は canvas の コン テキ スト を 設定 
repant() で 捕 画 を 行っ て いま す 。 

残り 0 時間 は ブロ ッ ク を 人 徐々 に 消す こと で 表現 し て いま す 。 経過 時 間 に 応 じ て JavaScript で 描画 する ブロ ッ ク 
の 数 を 変え て も よかっ た の で す が 、 デ ザイ ナー の 方 が 15 枚 の 画像 を 作成 し て くだ さっ た の で 、 そ れ を その まま 使 
用 する こと に し まし た 。 


フロ ッ ク の 画像 
| 。 | 芋 . 





ーーーーーーーーーーーーー 一 ーー ーーーーーーーーーー- 





よく 見 る と ブロ ッ ク の 数 に 応じ て 影 が 変化 し て いる こと が わか り ま す 。 こ の よう な 細部 へ の こだわ り は ゲー ム の 完 
成 度 を 高め る うえ で と て も 大 切 だ と 思い まし た 。 


ゲー ム を 実際 に 開始 する 関数 で す 。START ボタ ン の 押下 で 呼び 出 き れ ま す 。 ま ず 、canvas に マウ ス や 
タッ チ の イベ ント ハン ドラ を 登録 し ます 。 そ し て 、 メ イン ルー プ tick を 開始 し 、 START ボタ ン を 非 表 示 に し て 、 
BGM の 再生 を 開始 し て いま す 。 





ゲー ム の 心臓 部 分 と も ちい える メイ ン ル ー プ で す 。25msec ご と に 呼び 出さ れ ま す 。 ま ず 、 


mCount = Math.max(9, mCount - 1): 
1f (mCount == 9 の) { 
mIndex = 9 の : 


で メッ セー ジフ ェ ー ド アツ ウト 効果 を 演出 し て いま す 。mCount は 連鎖 時 に 表示 され る メッ セー ジ の 色 の 濃 き です 。 
IMlathmax(0. mCount - 1) は マイ ナス に な ら な いよ うに 単に mCount を 1 減ら し て いま す 。mCount が 0 に な っ た 
と さ は メッ セー ジ が 消え た と き な の で 、 mlIndex を 0 に し て 連鎖 も クリ ア し て いま す 。 次 の 下 文 の 条件 式 [(moves 
length > 0)]」 は 移動 中 の タイ ル の 有無 を 判定 し て いま す 。 移動 中 の タイ ル が ある 場合 に は 、「moveslil 
update()] で すべ て の タイ ル の 状態 を 更新 し ます 。 


moveS = moves.filter(function (t) { return t.count != 9 }): 


関 FNRF 
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で は 、 移動 中 の タイ ル の み を 抽出 し て いま す 。 Array オブ ジェ クト の 則 ter メソ ッ ド は 、 引 数 の 関数 が true を 返 
し た 要素 を 選択 (フィ ル タ リ ング ) し て 、 配 列 と し て 戻し ほす 。 つま り 、 タ イル の count が 0 で な いも の 、 す な わ 
ち 、 まだ 移動 中 の タイ ル が 配列 と し て moves に 戻さ れ ま す 。 

| (moves.length == 0)」 が true の 場合 は 、 す べ て の タイ ル が 移動 を 完了 し た の で 、 removeTile() を 呼び 
出し て 3 つ 以 上 連続 し た タイ ル の 消去 処理 を 行い ます 。 こ の 関数 は 消去 し た タイ ル の 枚数 を 返し ます 。 その 
数 が 0 より 大 きい 場合 は 連鎖 と な る の で 、 音 を 鳴ら し メッ セー ジ どの イン デック ス mIndex や 、 メ ッ セ ー ジ の フェ ー ド 
アウ トカ ウン タ mCount を 初期 化し 、 ス コア を 加算 し ます 。 

あと は 、 ゲ ー ム 開始 か ら の 経過 時 間 を 以下 の 式 で も と め 、69 秒 (BGM の 再生 時 間 ) を 超え た と き に ゲー ム 
終了 と し て いま す 。 


elapsed = ((new Date( ) ) . getTime() - startTime) / 1999: 


ple| setColor(x, y, C) 


初期 化 時 に 色 を 設定 する 関数 で す 。 上下 左 右 に 3 つ 以 上 同じ 色 が 隣り 合わ な い 場 合 に true を 、 そ う で な 
い 場合 は false を 返し ます 。 左 右上 下 の 4 方 向 を 調べ て いま す が 、 端 に 近い 場合 は 連続 する タイ ル が な い の 
で 、4 つ の 正文 を 使っ て その 条件 を 調べ て いま す 。 

| flag &= !(cO == cl & 層 c1 = テニ =c)」 は 少し 説明 が 必要 で し ょ う 。 引 数 の 色 が c、 降 の 色 が c1、 さらに 隣 
の 人 色 が c0 で す 。 こ の 3 つの 色 が 同じ と き | (cO0 == c1 多 & c1 == c)| が true に な り ま す 。 そ の 前 に ある |! は 
償 定 演算 子 で 、true と false を 逆転 きせ ます 。 

つま り 、 こ の 行 は |flag = flag & (3 つの 色 が すべ て 同じ で は な い )」 と いう 処理 を 行っ て いる の と 同じ で す 。 
ここ で & は AND 演算 で 、 両 方 が true の 時 の み 結 果 が true と な り ま す 。 よ っ て 、3 つ の 色 が 同じ だ と 、| flag = 
flag & false」 と な り 、flag も false と な り ま す 。 こ の 比較 を 左右 上 下 4 方 向 に つい て 行い 、 す べ て の 方 向 で 3 つ 
色 が 揃っ て いな いと きのみ true が 返る よう に し て いま す 。 


34iit0 に t:Ye【o4a16: う 





マウ ス 押 下 時 、 タ ッ チ 操作 時 の 座標 を mouseX と mouseY に 格納 し ます 。 


pls| mymouSemoVe(e) 





タイ ル を 移動 する 場合 、 マ ウス 押下 時 と リリ ー ス 時 の 座標 を 比較 し て 、 ど の 方 向 に 操作 きれ た か 調べ て いま 
す 。 ほ と ん どの 場合 、 リリ ー ス 時 の 座標 は mymouseup(e) で 取得 で きる の で す が 、 特 定 の ブラ ウザ で タッ チ 操 
作 が 行わ れ た 場合 に 座標 値 が 取得 で き な い こと が あり まし た 。 そ の よう な 状況 に 対処 する た め 、 最後 に 移動 し 
た 際 の 座標 を mymousemove(e) で 取得 し 、「(mouseUpX, mouseUpY)」 に 保存 し て いま す 。 





EN に t:】loK(-) 


マウ ス が 離さ れ た と き の コ ー ル バッ ク で す 。 タイ ル 領 域 の 左上 座標 は (34. 36)、 タイ ル 1 つ 分 の 幅 と 高き が 
44 で す 。 以下 の 式 で マウ ス 押 下 時 に どの タイ ル が 選択 きれ た か を 調べ ます 。 


var sx = Math.floor((mouseX - 34) / 44): 
var sy = Math.floor((mouseY - 36) / 44): 


倫 に 、 タ ッ チ や マウ ス の 操作 方 向 を 調べ ます 。 押 下 時 の 座標 は (mouseX, mouseY) で す 。 リ リー ス 時 の 座 
標 は (mx, my) で す 。 こ れ ら の 座標 を 比較 し 、x 軸 方 向 、y 軸 方 向 の どちら に 大 きく 移動 し て いる か 調べ ます 。 


1f (Math.abs(mx - mouseX) > Math.abs(my - mouseY)) { 


が true の と き は 、y 軸 方 向 よ り も x 軸 方 向 へ の 移動 量 が 多い こと に な り ま す 。 場合 、 移 動 方 向 に 応じ て nx を 1 
か -] に 設定 し ます 。y 軸 方 向 で も 同様 の 処理 を 行い ます 。 
移動 先 の 座標 が 革 囲 外 の 場合 、 $ し く は 、 タ イル が 移動 中 で ある 場合 は return で 戻り ます 。 


1f (nx > 11 || ny > 11 || nx < の 9 || ny< く 9 中 | 
tiles[Lsx][sy] .moving | | tiles[nx][ny] .moving) { 
Feturn 


そう で な い 場 合 は 、 以 下 の 行 で それ ぞ れ の タイ ル の 場所 と 色 を 入れ 替え る 処理 を 開始 し ます 。 


var c = tiles[ sx][sy] .color: 
tiles[sx][sy] .move(nx, ny, tiles[nx][ny] . co1or) : 
tiles[nx][ny] .move(sx, sy, Cc): 





phiol removeTile() 


横 方 向 、 縦 方 向 に 3 つ 以 上 同じ 色 が 並ん だ と き に 、 を の タイ ルオ ブ ジ ェクト の remove プロ パテ ィ に true を 
設定 し ます 。 


回 回 因 四国 
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for (var y= の 9 : y< く 12 : y++) { // 横 方 向 
var c9 = tiles[9][y] .color: 
Var Count = 1: 


で 上 か ら 1 行 ず つっ 調べ て いき ます 。 左端 の 色 を c0 に 、 連 続 数 を 示す count を 1 に 初期 化し ます 。 


TOP' (VaY X ニー1 XX く 1 み 2 ・、X を 3 ネ 
var c1 = tiles[x][y] .color: 
1f (c の 9 != c1) { 
CO の = Cl]: 
COunt = 1: 
}) else { 
1† (++cCount >= 3) { 
tiles[x - 2]Ly].remove = true: 


次 に 横 方 向 に 調べ ます 。 | var x = 1 と し て 隣 の タイ ル か ら 調 べ て いる こと に 注意 し て くだ さい 。 その タイ 
ル の 色 を c1 に 格納 し 、 色 が 違う 場合 (CO に c1)、c0 と count を クリ ア し ます 。 色 が 同じ 場合 は else に 進み 、 
count の 値 が 3 以上 に な っ た ら 該 当 す る タイ ル の remove プロ パテ ィ を true に し て いま す 。remove プロ パテ ィ は 
も と も と 本 ile オブ ジェ クト に は な か っ た も の で す 。 TavaScript で は この よう に 実行 中 に プロ パテ ィ を 追加 ・ 削 除 す る 
こと が 可能 で す 。 

縦 方 向 に つい て る 同様 の 処理 を 行い ます 。 最 後に 以下 の 行 で remove プロ パテ ィ が true に 設定 され た タイ 
ル の 数 を 数 えて いま す 。 


1iterate(function (x, y, も) { 1f (t.remove) { score++ } })): 





落下 処理 を 行い ます 。 コ ー ド は 短い の で す が 今 回 の 関数 の 中 で 一 番 複雑 な 処理 か 6 しれ ませ ん 。 沙 下 な の 
で x 軸 方 向 へ の 移動 は あり ませ ん 。 そこ で 外側 の ルー プ を x 軸 方 向 し し て 、 左 列 か ら 右 列 へ 順番 に 処理 を 行 
いま す 。 

落下 処理 な の で y 軸 方 向 は 下 か ら 上 方 向 へ 見 て いき ます 。y は 現在 の タイ ル を 示す 値 で 11 か ら 0 ま で 順番 
に 減ら し ます 。 一 方 sp は 、 沙 下 元 の タイ ル を 示す 値 で す 。 削除 きれ た タイ ル を スキ ッ プ し て 減少 きせ ます 。 
removeTile() で 削除 きれ た タイ ル に remove プロ パテ ィ を 設定 し た こと を 思い 出し て くだ さい 。 こ の 値 が 異な る 
場合 に タイ ル が 落下 する こと に な り ま す 。 を の 様子 を 以下 に 示し ます 。 


タイ ル 沙 下 の 様 子 








9 加 

胃 ・ 回 

回 … 回 - 回 … 次 

し Pe「OVG し 6 "Ge「OVG 間 erOVe 証 
回 一 … 右 一 回 一 還 
sp =19 詳 褒 紅 “の CVe y= FemOVe SD = 19 関 識 2 須 議 「emove 

5 SM は 


y も sp も 11 で 初期 化し 、 ルー プ を 実行 する 都度 デ ク リ メン ト し ます 。remove の タイ ル が ある 場合 、 sp は それ 
を スキ ッ プ する だ ため に さら に デ ク リ メン ト し ます 。 を その 処理 が 以下 の 部 分 で す 。 


while (sp >= の) { 
1f (tiles[x][sp] .remove) { 
SD~-~: 
}) else { 
break: 


y と sp と の 値 が 違う 場合 、 タ イル が 削除 きれ た こと を 意味 し ます 。 よ っ て 、 移 動 元 tles[xllsp] を 、 移 動 先 
tleslxly] に move し ます 。sp が 0 未満 の と き は 落ち て くる タイ ル が な い の で 乱数 で 色 を 決め て いま す 。 

この 時 点 で 落下 処理 が お わっ た の で 、「 iterate(function (x, y, 1) 】 tremove = false: り | で 、 remove プ 
ロ パ ティ に false を 代入 し て いま す 。 





ここ まで 読み 進め て きた 読者 で あれ ば 詳し い 説明 は いら な い は ず で す 。 背景 画像 を 描画 し 、 タ イル を 描画 
し 、 必 要 に 応じ て メッ セー ジ を 捕 画 し て いま す 。 メッ セー ジ に 濃度 を 以下 の 行 で 調整 し て いま す 。. 


四 NHI 
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27/ 





も こす よ 上 9 も VIG モ ペ PDAC 255 、 つう 5 29 ち 。、 キキ RNCOMDE / 59) ネー) 


また 、 残 り 9 時間 は 配列 に 格納 し た 画像 で 表現 し て いま す 。 


var index = Math.min(15, Math.floor(elapsed / (69 / 15))): 
ctx .drawImage(times[1index], 615, 327): 


少し 長め の コー ド に は な り ま し た が 、 330 行程 度 と いう 長き の 割 に は 見 た 目 も 良い 面白 い ゲ ー ム に 仕上 が っ た 
の で は な いで し ょ うか >。 





ゲー ム に 工夫 を 加え て 完成 度 を 高め て みよ う 


育 景 画像 を 描画 する 、 メ ッ セ ー ジ を 工夫 する 、 連 鎖 に よる 加点 を 凝っ た も の に する 、 ま だ まだ 改 
良 の 余地 は た くさ ん あり ます 。 自分 な り の 工夫 を 加え る こと で より 高い 完成 度 の ゲー ム に 仕上 げ 
(る る / に 3 人 天 
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物理 エン ジン を 使っ た ゲー ム 


本 書 の 締め くく り と し て 物理 エン ジン を 使っ た ゲー ム を 紹介 し ます 。 こ こ で は 一 般 的 
に 使わ れ て いる 物理 エン ジン を 利用 する の で は な く 、 物 理 エン ジン その も の か ら 実 
半 し ます 。 な お 、 物 理 エ ンジ ン 自 体 の 説明 は 、 残 念 な が ら 紙面 の 都合 上 掲載 で きま 
せん で し た 。 物理 エ ンジ ン が どの よう に 作ら れ て いる か 、 そ の 中 身 に も 興味 が ある 方 
は 以下 の URL に ある 解説 記事 を 参照 し て くだ さい 。 


https://thinkit.co.jD/Series/4770 





9 edeuO 
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)- | | 物理 エン ジン と は 


物理 エン ジン と は 、 さ ま ざ ま か 物理 法則 を シミ ュ レ ー ト し 、 物 体 の 衝突 や 動き を 計 
算 す る も の で す 。 こ れ を 利用 する こと で 実 世界 の よう な リア ル な 動き を 再現 で きま 
す 。 使い 方 は 簡単 で す 。 工夫 次 第 で いろ いろ な ゲー ム を 作る こと が で きる の で ぜひ 
試し て みて くだ さい 


(@- -]1 | な ぜ 物 理 エ ンジ ン を 使 お うと 思っ た か ? ) 


| Angry Bird] や |Cut the Rope」 な ど 物 理 エ ンジ ン を 利用 し た パズル 系 の ゲー ム が 人 気 で す 。「 よ り 多 
の 読者 に 興味 を 持っ て も ら う ため に 物理 エン ジン を 使っ た リア ル な ゲー ム を 作り た い 、 し か し な が ら 、 既存 の ラ 
イブ ラリ を 使っ て も それ だ け で 本 1 同位 の ボリ ュー ム に な っ て し まう | と 悩み まし た 。 

リア ル な 動き を 再現 する た め に は 、 摩擦 、 衝突 、 慣性 、 重力 、 運動 量 保存 、 重心 、 角 速度 し いっ た さま ざま 
な 物理 法則 に 基づい た 計算 を 行う 必要 が あり ます が 、 そ の 実装 は 容易 で は あり ませ ん 。 そこ で 、 多 く 〈 の ゲー ム 
は 既存 の 物理 エン ジン ライ ブラ リ を 利用 し て いま す 。 代表 的 な ライ ブラ リ に Box2D、PhysicsJS、Three]S、 
Unty な ど が あり ます 。 ラ イブ ラリ を 使う と 複雑 な 物理 計算 を 自分 で 行う 必要 が な く な り ま す が 、 そ れ で も ライ ブラ 
リ の 習 得 に は 時 間 と 労力 が か か り ま す 。 

そこ で 、 本書 で は 極限 まで シン プル な 物理 エン ジン を 自作 する こと に し まし た 。 角速度 や 質量 は 考慮 し な い 、 
走 形 ・ 円 ・ 線 し か サポ ー ト し な いな ど 、 物 理 エ ンジ ン と 名 乗る に は 借 越 な ほど シン プル な も の で す 。 行 数 は た っ 


た 250 程度 で す 。 し か し な が ら 、 シン プル な だ け に 使い や すく 〈、 修正 や 拡張 も 簡単 で す 。 ま さ に 「 百 聞 は 一 見 


に し か ず 」 で す 。 ま ず は サン プル を 実行 し て みて 、 どの よう な 動き を する の か 確か め て くだ さい 。 “どん な ふう に 
作ら れ て いる の だ ろう "と 興味 も も っ て いた だ けた な ら 、 今 年 の 休暇 を ほとん ど 費 や し た 自分 の 努力 が 報 わ れ た 
こと に な り ま す 。 


( 6-1-2 | 物理 エン ジン の 仕組 み ) 

物理 エン ジン を 利用 する 前 に 、 その 概要 に つい て 説明 し て お きま す 。 一 般 的 な 物理 エン ジン で は 、 最初 に 
仮想 的 な 空間 を 作成 し 、 を の 中 に オブ ジェ クト を 配置 し ます 。 2 次元 エ ンジ ン な ら 知 形 、 円 、 ポリゴン を 、 3 次 
宛 の エン ジン で あれ ば 立方 体 や 球 と な る で し ょ う 。 エ ンジ ン に よっ て は 複雑 な 形状 を 指定 し た り 、 それ ら を 組み 
合わ せ た り する こと が 可能 で す 。 そ れ ぞ れ の オブ ジェ クト は 固定 され て いる も の と 動き の ある も の に 大 別 き され ま す 
が 、 動 いて いる る も の で あれ ば 速度 や 加速 度 、 回 転 と いじ っ た パラ メタ を 指定 し ます 。 


2 次元 の 物理 エン ジン 


Mi 還 








初期 化 が お わっ た ら 、 この 仮想 世界 の 時 間 を 少し だ け 進 め ま す 。 す る と 、 速度 の 設定 され て いる オブ ジェ ク 
ト は 新しい 場所 へ 移動 し ます 。 重力 加速 度 が 設定 され て いる 場合 は 、 そ の 加速 度 $ 考 慮 に 入れ ます 。 場所 の 
移動 が 完了 し た ら 画 面 を 更新 し ます 。 


オプ ブ ジェ クト の 移動 


壁 (固定 ) 


rtYVNNH 上 き | 9 | テー 計り 汐 NVNIYH 骨 生 る 





この 作業 を 繰り 返し 行い ます 。 す る と を その うち オブ ジェ クト 同士 が 衝突 し ます 。 衝突 し た ら オ ブ ジ ェクト の 向き 
や 速度 を 変化 きせ ます 。 物理 エン ジン の 基本 的 な 動作 は これ を 繰り 返す だ け で す 。 


・ 時 計 を 進め て 場所 を 計算 只 描画 只 時 計 を 進め て 場所 を 計算 貴 描画 呆 … 


この よう に 物理 エン ジン の 原理 は 簡単 で す 。 面倒 な の は 移動 や 衝突 時 の 計算 で す 。 以下 の よう な 処理 を 
計算 で 求め る 必要 が あり ます 。 
・ オブ ジェ クト の 位置 計算 (速度 ・ 加 速度 ・ 摩 擦 ・ 重 力 ・ 回 転 等 ) 
・ 衝突 判定 
・ 衝突 時 の 処理 (反発 係数 ・ 重 力 ・ エ ネル ギー 保存 則 等 ) 
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これ ら の 計算 を どこ まで 正確 に 行う か 、 ど の 程度 複雑 な 形状 (と を その 組み 合わ せ ) を サポ ー ト する か 、 と いっ 
た と ころ が 物理 エン ジン の 特徴 に つなが っ て いき ます 。 本 書 で 紹介 する エン ジン は あく まで も 入門 用 な の で 円 ・ 
走 形 ・ 直 線 し か サポ ー ト し ませ ん 。 ま だ た オブ ジェ クト の 回 転 も サポー ト し ませ ん 。 移動 する の は 円 の み で 乱 形 と 
直線 は 仮想 空間 内 で 固定 され て いる も の と し ます 。 か な り 割 り 切 っ た 仕様 で す が 、 シ ンプ ル な ゲー ム に は 十分 
利用 で きま す 。 


(6-1-3 | 本 書 で 使用 し た 物理 エン ジン の ソー スコ ー ド ) 

今回 実装 し た 物理 エン ジン Tiny2DjsS の 全 ソ ー ス コー ド を 次 に 示し ます 。 エ ンジ ン を 使う だ け で あれ ば 内 容 
を 理解 する 必要 は な い の で ご 安心 くだ きい 。 “こん な 程度 の 行 数 で 実装 きれ て いる ん だ "と 眺め て いた だ けれ 
ば 十分 で す 。 し か し な が ら 、 内 容 を 理解 で きれ ば 自分 で 機能 を 追加 し た り 、 パ フォ ー マ ン ス を チュ ー ニ ング し 
だ り で きる よう に な り ま す 。 物理 エン ジン の 実装 を 理解 する に は どう し て も ある 程度 の 数 学 、 特 に ベク トル 演算 
の 理解 が 必要 と な り ま す 。 お そら く 〈 高 校 1 一 2 年 程度 の 数 学 で 対応 で きる 範囲 で し ょ う 。 数 学 は 苦手 ほし いう 人 も 
いる か も し れ ま せん が 、 ぜ ひ 以 下 の URL に ある 解説 記事 を の ぞい て みて くだ さい 。 


httpsS://thinkit.cO.jD/Series/4770 


"USe StFr1Ct"・: 


VaF 
Va『^ 
Va『 
Va『 


Vd『" 


BodyStatic = 1 
BodyDynamic 


》 


中 
し いり ト J に 


ShapeCircle % 


ShapeRectangle = 4: 
ShapeLine = 5: 


function Vec(x, y) { 


Vec . 


VeCc . 


Vec. 


Vec. 


Vec . 


this.x = x: 
this.y = y: 
prototype .add = function (v) { // 加算 


return new Vec(this.x + v.x, this.y + V.y): 


prototype .mul = function (x, y) {  // 掛 算 
vary=yllxi 
return new Vec(this.x * x, this.y * y): 


prototype.dot = function (v) { // 内 積 
return this.x * vV.x + this.y * V.yY: 


prototype.cross = function (v) { // 外 積 
return this.x * V.y - V.X * thiS.y: 


prototype .move = function (dx, dy) {// 自分 を 移動 
th1S.xX += dxX: 


this.y += dy: 


// 知 形 オブ ジェ クト 
function RectangleEntity(x, y, width, height) { 


this.shape = ShapeRectangle: 
this.type = BodyStat1C: 


this.xX = X: 
this.y = y: 
this.w = w1dth: 
this.h = height: 


this.deceleration = 1.9: 


Tiny2D.jS 


wwYVNNH 衣 きき | 9 | テー 半 吐 り 汐 上 RVNYH 帆 きき 4 10》 
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this. 


1sHit = function (1, ])) { 


return (this.Xx <=1&8&i<=this.x + this.w && 


this.y <=]&&]<= this.y + this.h) 


// 線 オ ブ ジ ェクト 


function 
this. 
this. 
this. 
this. 
this. 
this. 
this. 
this. 


this. 
this. 


LineEntity(x9, y9, x1, y1, restitution) { 
shape = ShapeLine: 
type = BodyStat1C: 
85 も 0 - 拉 し くき 8 
ん の すり すう たる 


X の 9 = x9: 
y9 = y9: 
X] = X1・ 
MA 問 和 AF 
restitution = restitut1ion || 9.9: 


Vec = new Vec(x1 - x9, y1 - y9): 


var length = Math.sqrt(Math.pow(this.vec.x, 2) + Math.pow(this.vec.y, 2)): 


this. 


norm = new Vec(y9 - y1, x1 - x9).mul(1 / length): 


// 円 オブ ジェ クト 


function CircleEntity(x, y, radius, type, restitution, deceleration) て { 
this.shape = ShapeCircle: 
this.type = type || BodyDynamic: 
RTS XX き " 
this.y = y: 
this.radius = rad1us: 
this.restitution = restitution || 9.9: 
this.deceleration = deceleration || 1.9: 
this.accel = new Vec(9, 9): 
this.velocity = new Vec(9, 9 の): 
this.move = function (dx, dy) { // 円 を 移動 
this.x += dx: 
this.y += dy: 
J 
this.isHit = function (x, y) { 
var d2 = Math.pow(x - this.x, 2) + Math.pow(y - this.y, 2): 
return d2 < Math.pow(this.radius, 2): 
J 


this.co11idedWithRect = function (r) { // 円 と 知 形 の 衝突 
// 知 形 の 4 辺 上 で 最も 円 に 近い 座標 (nx, ny) を 求め る 
var nx = Math.max(r.x, Math.min(this.x, Fr.xX + Fr.W)): 
var ny = Math.max(r.y, Math.min(this.y, r.y + r.h)): 


if (!this.isHit(nx, ny)) { // 衝突 な し ーー リタ ー ン 
FetuFrn: 

} 

1† (this.onhit) { // 衝突 時 の コー ル バ ッ ク 


this.onhit(this, r): 


var d2 = Math.pow(nx - this.x, 2) + Math.pow(ny - this.y, 2): 
var overlap = Math.abs(this.radius - Math.sqrt(d2)): 
var mx = の, my = 9: 


本" Cy = テア 、Y) イ // 上 辺 衝突 
my = -OVerlaD: 
}) else if (ny == r.y + r.h) {  // 下辺 衝突 


my = OVerlaD : 


mVWNH 組 きき | 9 | テー 半 計 0 光 届 VNIYH 則 寺 4 1 の ) 


}) else if (nx == r.x) { // 左辺 衝突 
mmX 三 -OVerlaD: 

} else if (nx == r.x + r.w) {  // 右辺 衝突 
mxX 三 OVerlaD: 

) else { // 知 形 の 中 
mx = -this.veloc1ty. xX: 


my = -this.velocity.y: 


this .move(mx , my) : 
if (mx) {  // X% 軸 方 向 へ 反転 
this.velocity = this.velocity .mul1(-1 x* this.restitution, 1): 
J 
if (my) {  // Y 軸 方 向 へ 反転 


this.velocity = this.velocity .mul(1, -1 x this.restitution) : 


this.co11idedWithLine = function (1ine) { // 円 と 線 の 衝突 
var vV の 9 = new Vec(line.x の 9 - this.x + this.velocity.x, 1ine.y9 - this.y + this. 
velocity.y) : 
var v1 = this.velocity: 
var vV2 = new Vec(line.x1 - 1ine.x9, 1ine.y1 - 1]ine.y9): 
Var CVv1V2 = vV1.CrOoSS(V2): 
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var t1 = v9.cross(v1) / cv1V2: 


V9.cross(V2) / cv1V2: 
var Crossed = (9 <=t1 && t1 <= 1) && (9 <= t2 && t2 <= 1): 


Var tt2 


1† (crossed) { 
this.move(-this.velocity.x, -this.velocity .y) : 
var dot9 = this.velocity .dot(1ine.norm):  // 法 線 と 速度 の 内 積 
Var Vec の = line.norm.mul(-2 * dot の ): 
this.velocity = vec9.add(this .velocity) : 
this.velocity = this.velocity .mul(1ine.restitution * this.restitution) : 


this.co11idedWithCircle = function (peer) { // 円 と 円 の 衝突 
var d2 = Math.pow(peer.x - this.x, 2) + Math.pow(peer.y - this.y, 2): 
1† (d2 >= Math.pow(this.radius + peer.radius, 2)) { 
FetuFn: 


1f (this.onhit) { 
this.onhit(this, peer): 

J 

1f (peer.onhit) { 
peer.onhit(peer, this): 


var distance = Math.sqrt(d2) || 9.91: 
Var overlap = this.radiuS + peer.Fradius - distance: 


var v=new Vec(this.x - peer.x, this.y - peer.y) : 


var aNormUnit = v.mu1(1 / distance) : // 法 線 単位 ベク トル 1 
var bNormUnit = aNormUnit .mu1(-1) : // 法 線 単位 ベク トル 2 


1† (this.type == BodyDynamic && peer.type == BodyStatic) { 
this.move(aNormUnit.x * overlap, aNormUn1t.y * over+]aDp) : 
var dot9 = this.velocity .dot(aNormUnit):  // 法 線 と 速度 の 内 積 
var vec9 = aNormUn1t .mul(-2 * dot9) : 
this.velocity = vec9.add(this .velocity) : 
this.velocity = this.velocity.mul(this.restitution) : 

ナ 

else if (peer.type == BodyDynamic && this.type == BodyStatic) { 
peer.move(bNormUnit.x * overlap, bNormUnit.y * overlap) : 
var dot1 = peer.velocity.dot(bNormUnit):  // 法 線 と 速度 の 内 積 
var vec1 = DbNormUnit.mul(-2 * dot1 ): 
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peer.velocity = vec1 .add(peer.velocity) : 
peer.velocity = peer.velocity .mul(peer.restitution) : 


J 


else { 


this .move(aNormUnit.x * overlap / 2, aNormUnit.y * overlap / 2): 
peer.move(bNormUnit.x * overlap / 2, bNormUnit.y * overlap / 2): 


var alTangUnit = new Vec(aNormUnit.y * -1, aNormUnit.x): // 接線 ベク トル 1 
var bTangUnit = new Vec(bNormUnit.y * -1, bNormUnit.x): // 接線 ベク トル 2 


var aNorm = aNormUnit.mul(aNormUnit .dot(this.velocity)): // a ベ クト ル 法 線 成分 
var aTang = aTangUnit .mu1(aTangUnit.dot(this.vel1ocity)): // a ベ クト ル 接 線 成 分 
var bNorm = bNormUnit .mu1(bNormUnit .dot(peer.velocity)): // b ベ クト ル 法 線 成分 
var bTang = bTangUnit .mu1(bTangUnit.dot(peer.velocity)): // b ベ クト ル 接 線 成 分 


this.velocity = new Vec(bNorm.x + aTang.x, bNorm.y + aTang.y) : 
peer.velocity = new Vec(aNorm.x + bTang.x, aNorm.y + bTang.y) : 


// 物理 エン ジ シシ 

function Engine(x, y, width, height, gravityX, gravityY) { 
this.worldX = x || 69: 
this.worldY = y || 9: 
this.worldW = width || 1999: 
this.worldH = height || 1999: 
this.gravity = new Vec(gravityX, gravityY)>: 
this.entities = []: 


this.setGravity = function (x, y) { 
this.gravity.X = X: 
this.gravity.y = y: 


this.step = function (elapsed) { 
vVar gravty = this.gravity .mul(elapsed, elapsed) : 
var entities = this.entit1ies: 


// entity を 移動 
entities.forEach(function (e) { 
1f (e.type == BodyDynamic) { 
var accel = e.accel .mul(elapsed, elapsed) : 
e.Velocity = e.velocity .add(gravity) : 
e.velocity = e.velocity .add(acce1 ) : 


rvVNH 衣 き | 9 | テー 寺 議 り 准 RNVNINYH 帆 寺 4 1 の 》 
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e.Velocity = e.velocity.mul1(e.deceleration) : 
e.mOVe(e.velocity .x, e.veloc1ty.y) : 


1 うす 


// 範囲 外 の オブ ジェ クト を 削除 
this.entities = entities.filter(function (e) { 
return this.worldX <= e.x && e.x <= this.wor1dX + this.worldW && 
this.worldY <= e.y && e.y <= this.worldY + this.wor1dH: 
1 リオ た 


// 衝突 判定 & 衝突 処理 
for (var 1 = の : 1 く entities.length - 1 : i++) { 
for (var ]= ニ ュ + 1: ] く entities.length : ] サ +) { 
var e9 = entities[1], e] = entities[]] : 
1f (e の 9.type == BodyStatic && e1.type == BodyStatic) { 
COnt1nUe : 


1† (e9.shape == ShapeCircle && e1.shape == ShapeCircle) { 
e9.col11dedWithCircle(e1) : 

}) else if (e9.shape == ShapeCircle && e1.shape == ShapeLine) { 
e9 .collidedWithLine(e1): 

}) else if (e9.shape == ShapeLine && e1.shape == ShapeCircle) { 
e]1 .collidedWithLine(e9) : 

} else if (e9.shape == ShapeCircle && e1.shape == ShapeRectangle) { 
e9.coll1idedWithRect(e1 ) : 

}) else if (e9.shape == ShapeRectangle && e1.shape == ShapeCircle) { 
e1 .collidedWithRect(e9) : 
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人 ゎ - ワ 物理 エン ジン を 使っ た ゲー ム 例 


いよ いよ 、 本 書 の 締め くく り と な る 物理 エン ジン を 使っ た ゲー ム で す 。 こ こま で 読 
み 進 ん で こら れ た 方 で あれ ば 問題 な く 理解 で きる と 思い ます 。 あ と は ちょ っ と し た 
好 森 心 ・ 想 像 力 を 働か せ て 、 ぜ ひ 自 分 の ゲー ム を 作っ て みて くだ さい 、。 


( 6-2-1 デモ (demo.html) ) 


井形 、 線 、 円 (固定 )、 円 (移動 ) と いじ っ た オブ ジェ クト を 画面 上 に 配置 し た だ け の サン プル で す 。 シ ンプ 


/ レ / ペー ンジ で で す か 、 それ だ が り ( に お も る し みろ \ い * 動 き を し ます 


demo 





demo.html 


く !DOCTYPE html> 
く html> 
く head> 
く meta charset="UTF-8"> 
く style> 
#CanVaS { 
w1dth: 699px: height: 699px: 


テー 寺 議 り 浴 NVYH 上 山寺 4 1) 
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く / style> 
く Scr1Dt Src="T1ny2D . ]S "> く / SCF1Dt> 
く SCF1Dt> 

"USe Str1ct"・ 

Var eng1ne , CtX: 


var colors = ["yellow", "green", "orange", "blue", "white"]: 


function rand(v) { 
return Math.fl1oor(Math.random() x* V): 


function init() {  e 路 W 
Var Fr: 
engine = new Engine(9, 9, 699, 899, 9, 9.8): 


r = new RectangleEntity(599, 59, 59, 499): 
Fr.color = "green": 
eng1ne.entities.DpuSsh(r): 


r = new RectangleEntity( の 9, 59, 59, 499): 
Fr.color = "yel11ow": 
eng1ne.entities.Dush(r): 


F = new LineEntity(59, 399, 499, 359): 
r.color = "orange": 
eng1ne.entities.Dush(r): 


F = new LineEntity(599, 499, 199, 459): 
F.Color = "orange′": 
eng1ne.entities.Dpush(r): 


for (var 1= の 9 ・: すく 7 : 1++) 
fOr CWC も 5 まで 3: や HHY3 キ 
r = new CircleEntity(1 * 69 + 199, ] x* 69 + 199, 5, BodyStatic) : 
Fr.color = colors[]]: 
eng1ne.entities.DuSsh(r): 


の に た VS - ま も 、=: の 5 で 20 こす キャ) 【 
Fr = new CircleEntity(rand(499)+59, rand(299) , 19, BodyDynamic) : 
F.Ccolor = colors[rand(5)] : 





engine.entities.push(r): 
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ctx = document.getElementById( "canvas") .getContext("2d"): 
setInterval(tick, 59) : 


function tick() {  eR 


engine.step(9.91): e 民 』 
Fepa1nt( ) : 


function repaint() { 5 | 


ctx .f111Style = "black": 6 
ctx .f111Rect( の 9, 9, 699, 609): 
for (var 1 = の :i ぐ < eng1ne.entities.]ength: i++) { = 補 き 


var e= engine.entities[i] : 
ctx .f111Style = e.color: 
ctx.StrokeStyle = e.color: 
Switch (e.shape) { 
case ShapeRectangle : 
ctx .f111Rect(e.x, e.y, e.w, e.h): 
break: 
Case ShapeCircle: 
ctx .beginPath() : 
ctx.arc(e.X, e.y, e.radius, 9 の, Math.PI x* 2): 
ctx . closePath( ) : 
CX すす 4 よ ( ): 
break : 
case ShapeLine: 
ctx .beginPath( ) : 
CtxX .mOVveTo(e.x9, e.y9): 
ctx.1ineTo(e.x1, e.y1): 
Ctx . stroke( ) : 
break : 


J 
く /SCr1Dt> 
く /head> 
< く body onl1oad="init() "> 
く canvaSs 1d="canvas” width="699" height="699"></canvas> 
く /body> 
く / html> 
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物理 エン ジン は いろ いろ な ペー ジ か ら 参 照 す る の で 別 の ファ イル (| Tiny2Djs」 P.283) に 保存 し まし た 。 
外部 の TavaScript フ ァイル を 取り 込む 場合 は 以下 の よう に script 要素 を 使用 し ます 。 


< く Script src="T1ny2D . ]S "> く /SCr1Dt> 


で は プロ グラ ム を 見 て いき まし ょ う 。 広域 変数 は 、 engine (物理 エン ジン オブ ジェクト) 、 ctx (グラ フィ ッ ク コ 
ン テ キ スト ) 、colors ( 色 の 配列 ) の 3 つ だ け で す 。 関数 rand(v) は 整数 の 乱数 を 返し ます 。 


yi init() 


init() か ら 実 行 が 開始 きれ ます 。 物理 世界 を 作成 し て オブ ジェ クト を 配 赴 し て いま す 。 


function 1n1t() { 
Var r: 
engine = new Engine( の 9, 9 の, 699, 899, 9, 9.8): で の ) 


Fr =new RectangleEntity(599, 59, 59, 499): 
F.Ccolor = "green': 
engine.entities.push(r) : を で GB) 


Fr =new RectangleEntity( の 9, 59, 59, 499): 
r.color = "yel11ow": 
engine.entities.push(r): 


Fr = new LineEntity(59, 399, 499, 359) : 
F.Ccolor = "orange': 
engine.entities.push(r): 


Fr = new LineEntity(599, 499, 199, 459): 

F.Color = "orange': 

engine.entities.DpuSh(r): 

for CyaF 1 = を) 7 4 や 63 も 

for (va = の 9 すく 3 5: やす ) 【 

r = new CircleEntity(1 * 6 の + 199, ] * 69 + 199, 5, BodyStatic) : 
r.color = colors[]]: 
engine.entities.Dpush(r): 
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物理 世界 は Engine オブ ジェ クト と し て 実装 きれ て お り 、 以 下 の 命令 で 作成 し ます ④ め 


eng1ne = new Engine( の 9, 9, 699, 899, 9, 9.8): 


Engimne オブジェ クト の コン スト ラク タ の 引数 は 、 世界 の x 座 標 、y 座 標 、 幅 、 高 さき 、x 方 向 の 重力 、 方 向 


の 重力 で す 。 こ こ で は 、 左上 座標 (00)、 幅 600、 高 800 で 下方 向 に 重力 が ある 世界 を 作っ て いま す 
Tiny2D で サポ ボー ト し て いる 物理 オブ ジェ クト は 以下 の 3 種類 で す 


* 電 0 y, w1dth, height) 
(x, Y) を 左上 座標 と する 幅 width、 高 き height の 外形 を 作成 し ます 


・ CrcleEntity(x, y, radius, type, restitution, deceleration ) 


(x, y) を 中 心 座 標 と する 半径 radius の 円 を 作成 し ます 。type は BodyStatic (円 が 固定 され て いる ) か 、 


5odyDynamic ( 動 的 に 動く か ) を 指定 し ます 。 デ フォ ルト は BodyDynamic で す 。restitution は 反発 


係数 、deceleration は 減速 度合 いし な り ま す 。restitution. deceleration は 省略 可能 で す 


*・ LineEntity(x の 9, y9, x1, y1, restitution ) 
(0, yO) か ら (x1, y1) へ の 線 を 引き ます 。restitution は 反発 係数 で す 。restitution は 省略 可能 で す 


息 形 、 円 、 線 と 作成 し て いま す が 、 それ ぞ れ の オブ ジェ クト の コン スト ラク タ を 呼び 出し て オブ ジェ クト を 作成 
し て いる だ け で す 。 と くに 難し いと ころ は な いと 思い ます 。 作成 し て いる オブ ジェ クト の 様子 を 次 の 図 に 示し ます 


往 形 、 円 、 線 オフ ジェ クト の 作成 


RectangleEntity RectangleEntity 
X: の り , y:59, w: 59, h:4099 X:599, y:59, w:59, h:4099 


(9 の) 







ーー 宜 Circ]1eEntity 


(1*69 + 199, ]jx69 + 199), r:5 


1neEntity 
(59,399) - (499,356) 


LineEntity 
(599, 499) - (199,459) 


( 69 の , 899 ) 


*u 浴 VNVH 組 き | 9 | テー 守 潤 0 浴 VH 帆 き 4 | の ⑳ 


、 
Ti 


sf トト 
sp の ど 
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作成 し た オブ ジェ クト は engine.entities.push(r) で 物理 世界 に 追加 し ます ⑥。 あと は 、 医 の engine.step() で 
物理 世界 の 時 計 を 進め れ ば 、 物理 世界 の オブ ジェ クト が 動き 始め り ま す 。 そ の 座標 を 取得 し て 描画 すれ ば 、 あ 
た か る も 物 が 動い て いる よう に みえ る と いう わけ で す 。 

ちな み に 、 円 オブ ジェ クト は 動か すこ と が で きま す が 、 そ の 初速 度 を 話 で 


F.velocity.x = rand(19) - 5: 
Fr.velocity.y = rand(19) - 5: 


の よう に 設定 し て いま す 。 あ と は 最後 に グラ フィ ッ ク コ ン テ キ スト を 取得 し 、 setInterval で メイ ン ル ー プ を 開始 し 
て いま す 。 

JavaScript で は オブ ジェ クト に プロ パテ ィ を 追加 する こと が で きま す 。 RectangleEntity や CircleEntity と いっ 
た 物理 世界 の オブ ジェ クト も 例外 で は あり ませ ん 。 今回 は 描 画 用 に color プロ パテ ィ を 追加 し て いま す 。 





tick り で は 、 エ ンジ ン の 時 間 を 0.01 進め 、 再 反 画 を 行う と いう 処理 を 行っ て いま す 。 





| 3 上 gieEllaht@ 


repaint() で は 再 描画 を 行い ます 。 ま ず 話 で 、 画 面 全体 を 黒 で 塗り つぶ し て クリ ア し ます 。 
物理 世界 に ある オブ ジェ クト は 物理 エン ジン の entities プロ パテ ィ (配列 ) に 格納 され て いる の で 、 太 の for 
文 で 要素 を 順番 に 取り 出し ます 。 


for (var 1i= の 9 : 1 く < く engine.entities.length: 1++) { 
var e = engine.entities[i]: 





Switch (e.shape) { で ⑧) 

case ShapeRectangle: 
ctx .f111Rect(e.X, e.y, e.W, e.h): 
break : 

case ShapeC1rcle: 
ctx .beginPath( ) : 
ctx .arc(e.x, e.y, e.radius, 9, Math.PI ぇ * 2): 
ctx .closePath( ) : 
C も る まあ で ツ く 
break: 


case ShapeLine : 
ctx .beginPath() : 
Ctx .moveTo(e.xX9, e.y9): 
ctx.11ineTo(e.x1, e.y1): 
ctx . stroke( ) : 
break: 


TMRF 





(で 、 コ ン テ キ スト の fillStyle (塗り つぶ し 色 ) と strokeStyle (描画 色 ) を その 要素 の color プロ パテ ィ で 設 
定 し 、⑧ の switch 文 を 使っ て 、 形 状 に 応じ た 処理 を 呼び 出し て いま す 。ShapeRectangle ( 知 形 ) の と き は 
illRect を 使っ て 邊 形 を 描画 し 、 ShapeCircle (円 ) の と き は arc を 使っ て 円 を 描画 し 、 ShapeLine ( 線 ) の と き 
は moveTo と lneTo で 線 を 描画 し て いま す 。 

だ っ だ これ だ け で 物理 オブ ジェ クト が 画面 上 を 動き 回 っ て くれ る の で す 。 お も し ろ い と お も いま せん か ? 

と ころ で 、 こ の デモ を 実行 し て いる と 、 円 が 線 を 飛び 越え る と いう 現象 に 気づい た 人 も いる と 思い ます 。 実は 
known 1SSue で す 。 動く 円 が 何かと 衝突 し て 向き を 変え る と き 、 その 速度 ベク トル を 変更 する と と も る に 、 め り 0 込み 
を 解消 する た め 重 な り 量 を 移動 させ て いま す 。 実は を の 際 に も 本 当 は 衝突 判定 を すべ き な の で す が 、 こ の エン 
ジン で は 衝突 判定 を し て いな い の で す 。 よ っ て 、 移 動 量 が 大 きか っ た りす る 場合 に 、 この よう な 現象 が 起き て し 
まい ます 。 修正 も 考え た の で す が コ ー ド 量 が 増え そう だ っ た の で 今回 は 見 送り ほし た 。 ご 丁 承 く だ さい 。 


補 テ ー キ 慎 り 準 上 VNNH 骨 きき | 9 | テー 半 議 り 准 RNNINH 骨 寺 る 


(6-2-2 | ビリ ヤー ド (billiard.html) ) 


や で ゃ ら の の る の の の の の の の の の の の の の の の の の の の の の の の の の の の ひ の の の あの の の の の の の の の の ひ の の ひひ の の の の の の の ら の の の の の の の の の の の の の の ひらの の の の の の の の の の ら の らら の の の の の の の の の の の の の の の の の の の の の の お の の の の の の の の の の の の の ひら の の の ゆら ゆら の の の ゆ ゆ の る の の る の ゆら の の の ⑥⑥⑤ の る の や の の @ の ちあ 放 生 全 oo 


手玉 の 上 で マウ ス を 押し て ドラ ッ グ し 、 マ ウス を 離す と を の ボー ル が 動き だ し ます 。 


ビリ ヤー ド 
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く !DOCTYPE html> 


く html> 
く head> 


<META charset="UTF-8"> 


< く style> 


#CanVaS { 


) 


く / style> 


width: 899px: height: 459Dx : 
touch-action: none: 


< く scr1Dt src="T1ny2D . ]S "> く / SCF1Dt> 


く SCr1Dt> 


"USe StF1Ct"・ 


var ctx, engine, target, mousePos = nul1: 


var walls =[ 


りす 


[-199, -199, 1999, 149], 
[-199, 419, 1999, 199] , 
[-199, -199, 149, 659], 
[769, -199, 199, 659] , 


var holes =[ 
[35, 35], [499, 35], [765, 35], [35, 415], [499, 415], [765, 415], 


』: 

var balls =[ 
{ x: 299, y: 299, c: "#FFF499” }, 
と 2E 、 ー ド 辻 と 
ダス すい 語 2 いら マイ タコ テス だ 
を 肖 00。 ザ 2ーB の ー こ で 表 CB0 7 
に > 175、 y: る 5 61 [90700 了 。 
の 2 あの て 2 2 の EBAI た [お 
DA 
本 23 才 。、 も こ ) 才 う すま 3 まき に 、 。 
を 導 た 、 す 生 清く 六 才 ー の く O 本 E か 4 が は 欄 こ オッ 
を 3 は 二 夫人 だ 

」: 


function init() { ee 語 


// エン ジン 初期 化 & イベ ント ハン ドラ 設定 

engine = new Eng1ne(-199, -199, 1999, 659, 9, の ): 
var canvas = document . getElementById( "canvas”"): 
CanVaS . OnmOuSedown = mymouSedown : 
CanVaS . OnmOUSemmOVe ニニ ymOuSemOVGe : 


CaTVaSs . OTTOUSGUD 三 「IYIHOUSGUD : 


Billiard.html 


canvas . addEventListener('touchstart ', mymousedown) : 
canvaSs . addEventListener( "touchmove ' , mymOuSemoVe ) : 
canvaSs . addEventListener( "touchend ' , mymouSeuD) : 


// 尾 

walls.forEach(function (w) { 
varr= new RectangleEntity(w[9], w[1], w[2], w[3]): 
F.COlor = "gray ′: 


engine.entities.push(r): 


}): 


// ボー ル 
balls.forEach(function (b) { 
varr= new CircleEntity(b.x, b.y, 15, BodyDynamic, 9.9, 9.99): 
F.Ccolor = D.Cc: 
b.entity = r: 
eng1ne.entities.pDuSsh(r): 


か 


holes.forEach(function (h) { 
var r= new CircleEntity(h[L9], hL1], 29, BodyStatic): 
F.Color = "rgba(255,255,255,9)“: 
Fr.onhit = function (me, peer) { 


engine.entities = engine.entities.f1ilter(function (e) { 
Feturn e != Deer: 


すま 5 


eng1ne.entities.Dpush(r): 


}): 


// その 他 (Canvas, Timer) の 初期 化 
ctx = canvas .getContext( "2d”"): 
ctx .font = "2 の pt Arial": 
ctx.strokeStyle = "blue": 
setInterval(tick, 59): 


function tick() { 
engine.step(9.91): // 物理 エン ジン の 時 刻 を 進め る 
repaint(): // 再 描画 
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for (var i= の 9 : i< く bal1ls.1ength : i++) { 
if (bal11s[i] .entity.1isHit(mouseX, mouseY)) { 人 
target = balls[i] .entity: 
OUSePOS = { X: mOUSeX, y: mmOuSeY }: 
break: 


function mymousemove(e) {  e 紅 引 
Var mouseX = !isNaN(e.offsetX) ? e.offsetX : e.touches[9] .c1ientX: 
Var mouseY = !isNaN(e.offsetY) ? e.offsetY : e.touches[9] .c1ientY: 
1† (target) { 
OUSePOS = { X: mmOuUSeX, y: moOuSeY }: 


function mymouseup(e) { * 
1f (target) { 


Var dx = mousePos.x - target.x: 
var dy = mousePos.y - target.y: 
target.velocity.x = dx / 19: 
target.velocity.y = dy / 19: 


J 
target = nul]: 


function repaint() { 


// 背景 クリ ア 
ctx .drawImage(bi]1iard, 9, 9 の, 899, 459): 


// ボー ル ・ 壁 の 描画 
for (var i= の 9 : ii く engine.entities.]1ength: 1++) { 
var e= engine.entities[1] : 
ctx .f111Style = e.color: 
Switch (e.shape) { 
case ShapeCircle: 
ctx . beginPath( ): 
Ctx.arc(e.x, e.y, e.radius, 9 の, Math.PI x 2): 
ctx .closePath( ) : 
ctx .f ュ 11( ) : 
break: 
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1f (target && mousePos) { 
ctx .beginPath( ) : 
ctx .moveTo(target.x, target.y) : 
ctx .11neTo(mousePos .X, mouSePos. y) : 
ctx . stroke( ) : 


ナ 

く / SCr1Dt> 
く /head> 
<body onload="1nit() "> 

く canvaSs 1d="canvas” w1dth="899”" height="459"></canvas> 

く 1mg 1d="b1l11iard”" src="bi11iard.png" style="display : none "/> 
く /body> 
く /html> 


基本 的 な つく り は demo.html と 同じ で す 。 説明 が 重複 する 部 分 は 割愛 し ます 。 広域 変数 の walls は 歴 、 holes 
は 穴 、balls は 玉 の 座標 情報 で す 。 





初期 化 を 行い ます 。 ま ず 各 種 イ ベン ト ハ ンド ラ を 設定 し ます 。 次 に 畔 で 、walls の 要素 を forEach 文 を 使っ 
て 順番 に と り だ し 、 RectanglePEntity オブ ジェ クト を 作っ て 歴 を 構築 し て いま す 。 Array.forEach メソ ッ ド を 使っ 
て いま す が for 文 で も か まい ませ ん 。 好き な ほう を 使っ て くだ さい 。 

ボー ル も 同様 に オブ ジェ クト を 作成 し て いま す 記 。 穴 だ け は 衝突 処理 が 必要 な の で 若干 異な り ま す 。 穴 に 
ボー ル が ぶつ か っ た と き は (= 穴 に ボー ル が 沙 ち た ) ボー ル を 削除 する 必要 が ある か ら で す 。 還 の コー ド で を 
の 処理 を 行っ て いま す 。 


Fr.onhit = function (me, peer) { 
engine.entities = engine.entities.filter(function (e) { 
Feturn e != Deer: 


導 


r『 は 穴 の オブ ジェ クト で す 。 こ れ に onhit メソッド を 追加 し て いま す 。 こ の メソ ッ ド は 自身 が ほか の オブ ジェ クト 
と 衝突 し た と き に 呼び 出さ れ ま す 。 引 数 の me は 自分 で 、peer は 衝突 相手 の オブ ジェ クト で す 。 

Arrayilter を 使い peer 以外 の 要素 、 す な わ ち 衝突 相手 以外 の 要素 を 抽出 し て いま す 。 fiter の 引数 に は 
関数 を 指定 し ます が 、 配列 内 の 要素 が peer で な いと き (|e = peer」) に true を 返し て いま す 。 こ うす る こと で 、 
衝突 し た 要素 の み が エ ンジ ン の entities か ら 取 り 除 か れ 、 物理 世界 か らち なくなり ます 。 あと は 、 グ ラフ ィ ッ クコ ン 
テキ スト を 取得 し メイ ン ル ー プ を 開始 し て いる だ け で す 。 
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5| mymousedown(e) 


マウ ス 押 下 時 の コー ル バ ッ ク 関 数 で す 。 玉 の 上 で マウ ス が 押さ れ た と き は 、 その 玉 を 手玉 と し て 覚え て おき 、 
マウ ス が 移動 し た 場所 まで の 線 を 描画 し ます 。 マ ウス が 離さ れ た と き に 、 その 距離 と 向き を も と に 手玉 に 初速 度 
を 了 号 え ます 。 

マッ ウス 押下 時 の 座標 は |(e.offSetX, e.offsetY)] で 取得 で きま す 。 タ ッ チ の 場合 は 「e.touches[OlclientX 」 
で 取得 し ます 回 。 

この 座標 が 玉 に 含ま れ て いる か を 右 の |ballsillentityisHit(mouseX. mouseY) | で 判定 し て いま す 。 こ こ で 
| ballslilisHit(mouseX, mouseY)] で は な いこ と に 注意 し て くだ さい 。balls は 物理 世界 の 玉 オ ブ ジ ェクト で 
は な く 、 物 理世 界 の 玉 を 作成 する た め の 座 標 デ ー タ を 格納 し て いる 広域 変数 だ か ら で す 。 init() で は 較 の よう 
に 玉 オ ブ ジ ェクト を 初期 化し まし た 。 


balls.forEach(function (b) { 
varr=new CircleEntity(b.x, b.y, 15, BodyDynamic, 9.9, 9.99): 
r.Ccolor = b.Cc: 
b.entity = r: 


r『 は CircleEntity オブ ジェ クト で 物理 世界 の 玉 に 該当 し ます 。forEach で は 配列 の 個々 の 要素 が 関数 の 引 
数 と し て 渡る され ま す 。 上記 の コー ド で は b が それ に あたり ます 。 を その entity プロ パテ ィ に 物理 世界 の オブ ジェ クト 
を 格納 し て いる の で 、 物 理世 界 の 玉 オ ブ ジ ェクト は ballslilentity で 参照 する こと が で きる の で す 。 と も あれ 、 マ 
ウス を 和む 円 が 見 つか っ た 場合 、 そ の 円 を 手玉 と し て 広域 変数 target に 格納 し 、 マ ウス 押下 時 の 座標 を 
mousePos に 保存 し て お きま す 。 





ls| mymouSsSemoVe(e) 


マツ ウス 移動 時 の コー ル バ ッ ク 関 数 で す 。 手 玉 が ある と き は mousePos を 更新 し ます 。 





pls| mymouSseuD(Ge) 


マウ スリ リー ス 時 の コー ル バ ッ ク 関 数 で す 。 手 玉 が ある と き は 現在 の マウ ス 位 置 mousePos と 手玉 target の 
座標 の 差分 か ら 手玉 に 初速 度 を 与え ます 。 

再 捕 画 の 関数 repaint() は demo.html の コード と ほとん ど 同 じ で す 。 手玉 target と mousePos が ある と き は る を 
れ ら を 粘 ぶ 線 を 描画 し て いま す 。 


kp タッ チ デ バイ ス 対 応 に つい て 





この ゲー ム で は クリ ッ ク さ れ た 座標 が 円 の 中 に ある と き に その 球 を 手玉 と し て いま す 。 マウ ス の 場合 、 接点 が 
1X1 ビ クセ ル な の で 円 の 中 を クリ ッ ク す る の は 簡単 で す 。 
一 方 、 タ ッ チ デバ イス の 場合 、 指 が 接する 面積 が 広く な る た め 円 の 中 を クリ ッ ク す る の が 難し く な り ま す 。 を 


の た め 、 ス マ ホ の よう に 画面 が 小さ い デ バイ ス で は 手玉 を 操作 し づら く 〈 く な っ て し まい ます 
ボー ル を 作成 し て いる コー ド は 以下 の 筒 所 で す 


varr= new CircleEntity(b.x, b.y, 15, BodyDynam1c, 9.9, 9.99): 


この 半径 15 を 大 きく する こと で 玉 が 大 きく な り ま す 。 玉 が 大 きく な れ ば 操作 性 は 改善 する か も しれ ま せん 
だ だ し 、 玉 の 大 きき を 大 きく する 人 法 は 場 輝 た り 的 な 半 処 に すぎ ナル ん スマ ホ を 想定 し て ゲー ム を (人 コ る 場 
全 は 、 最 初 か ら 指 で も 操作 し や すい 仕様 に し て お 〈 く こと が 大 切 で す 


( 6-2-3 ペグ (Peg.html) ) 

マウ ス を クリ ッ ク し た 方 向 へ 玉 が 発 笛 さ きれ ます 。 殺 に あたる と 釘 の 人 色 が 変わ り ま す 。 す べ て の 釘 の 公 を 変え 
る まで の 時 間 を 競う ゲー ム で す 。 こ の ゲー ム を 理解 する た め に 必要 な 知識 は 、 本 書 の これ まで の 説明 で カバ ー 
し て いる の で 、 ソー スコ ー ド の 説明 は 省略 し ます 。 目 分 で ソー スコ ー ド を 読ん で 理解 する と いう 作業 を お 楽し みく 


ルレ で で 
7 こい 


ペク 
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く !DOCTYPE html> 


く meta charset="UTF-8"> 


#CanVaS { 


w1dth: 699px: height: 699px: 
touch-act1on: none: 


く SCr1Dt src="T1ny2D. ]S "> く / scriDt> 

く SCF1Dt> 
"USe Str1Cct"・: 
var ctx, eng1ne, timer, startTime = 9 の : 
Var Sound, score = 9, dir = Math.PI / 2: 


function rand(v) { 


return Math.fl1oor(Math.random() * vV): 


function init() { 


// エン ジン 初期 化 & イベ ント ハン ドラ 設定 

eng1ne = new Engine(-199, -199, 899, 899, 9, 9.8): 
vVar canvas = document . getElementById( "canvas") : 
CanVaS . OnOUSemOVe = mymOuSemOVe: 

CanVaSs . Oncl1ick = myclick: 

Sound = new Audio( "sound9 .mp3"): 


// 和 栗 

Fr = new RectangleEntity(-59, 9, 199, 599): 
Fr.color = "yellow": 

engine .entities.push(r): 


r = new RectangleEntity(559, 9, 199, 599): 
F.Color = "yellow": 
eng1ne.entities.Dush(r): 


// 釘 
for (var i = の : 1 <9 : i++) { 
for (vVar 1=9:] く 8+1i% 2 ・ 1++) 
Va X = すす うち も の エゴ 2Z5) -- 25 * (1 あの 7 


varr= new CircleEntity(x, 1 * 59 + 199, 5, 


Fr.onhit = function (me, peer) { 
1f (me.color == "blue") { 


Peg.html 


BodyStat1iCc): 


me.Color = "red": 

SCOTGe++・ 

SOund . DauSe( ) : 

Sound.CurrentTime = 9 の : 

SOund . Day( ) : 

1† (score >= 76) { 
clearInterval (timer) : 
timer = NaN: 
FeDpa1nt( ) : 


| 


F.Color = "blue": 
eng1ne.entities.push(r): 


// その 他 (Canvas, Timer) の 初期 化 
ctx = Canvas .getContext( "2d"): 
ctx.font = "29pt Aria1"・ 
startTime = new Date() : 

timer = setInterval(tick, 59) : 


function tick() { 
engine.step(9.91): // 物理 エン ジン の 時 刻 を 進め る 
repaint() : // 再 描画 


function myclick(e) て { 
var ball = new CircleEntity(399, 19, 19, BodyDynamic, 9.9): 
ball.velocity.x = 19 x* Math.cos(dir) : 
ball.velocity.y = 19 * Math.sin(dir) : 
ball.color = "yellow": 
engine.entities .push(ba11 ) : 


funct1on mymousemove(e) { 
dir = Math.atan2(e.y, (e.x - 399)): 


function repaint() { 
// 背景 クリ ア 
ctx .†T111Style = "black": 
ctx .†111Rect( の 9, 9, 699, 699): 
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// 発射 台 描 画 

ctx .†111Style = "orange": 

Ctx . SaVe( ) : 

ctx .translate(399, の 9): 

ctx . rotate(dir): 

ctx .f111Rect(-29, -19, 59, 29): 
ctx . restore( ) : 


// ボー ル ・ 壁 ・ 殺 の 描画 
for (var 1= の 9 : 1 く <engine.entities.length: 1++) { 
var e = engine.entities[ ュ 1] : 
ctx .f111Style = e.color: 
Switch (e.shape) { 
case ShapeC1rcle: 
ctx .beginPath( ) : 
ctx .arc(e.X, e.y, e.radius, の 9, Math.PI ぇ * 2): 
ctx .closePath( ) : 
を た すすま ( < 
break: 
case ShapeRectangle : 
ctx .f1i11Rect(e.x, e.y, e.w, e.h): 
break: 


// 各種 情報 表示 
var elapsed = Math.floor((new Date() .getTime() - startTime) / 1999): 
ctx.f11llText("score:”" + Score + "/76", 249, 559): 
ctx .f111Text("time:”" + ("999'′+ elapsed) . slice(-3) , 49, 559): 
1† (isNaN(timer)) { 
ctx .f1i1l1Text("CLEARED!!"。 229, 369): 


) 
く / SCr1Dt> 
く /head> 
く body onload="init() "> 
く canvaS 1d="canvas” w1dth="699” height="699"></canvaS> 
く /body> 
く /html> 


mymousemove(e) に つい て は 補足 し て お きま し ょ う 。IMath.atan2(y, xy は アー クタ ンジ ェ ン ト と いっ て 、 座標 か 
ら 角 度 (ラジ アン ) を 求め る 関数 で す 。 引 数 の 順番 が y 座 標 、x 座 標 し な っ て いる こと に 注意 し て くだ さい 。 求 
め た 角度 を 広域 変数 dir に 格納 し 、 砲 台 の 描画 や 玉 の 発射 角 の 計算 に 使用 し て いま す 。 

また 、 効 洒 音 再生 時 に |「sound.currentTime = 0」 と 再生 位置 を 設定 し て いま す 。 今回 の 効果 音 は 最初 
に アタ ッ ク 部 分 が あり 、1 秒 程度 か け て 減衰 し て いき ます 。 普通 に 再生 する と 減衰 を 待っ て か ら 、 次 の 音声 が 
再生 され る の で 、 連 続 し て 玉 が 釘 に ぶつ か っ た 場合 に 適切 な 効果 が 得 ら れ ま せん 。 そこで 、currentTime を 
設定 し 、 よ り 自 然 な 効果 が 得 ら れる よう に し て いま す 。 


(6-2-4 | パチ ンコ (Pachinko.html) ) 


マウ ス を 押す 、 も し く は タッ チ を する と レバ ー が 引か れ 、 離す と 玉 が 発射 し ます 。 画 面 下部 を 左右 に 移動 する 
ター ゲッ ト に 玉 が 当たる と スコ ア が 加算 きれ ます 。 


バテ ンコ 





MM 
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く !DOCTYPE html> 


く html> 
く head> 


く title>Pachinko< く /t1tle> 
く <meta charset="UTF-8 "> 


< く style> 


#CanVaS { 


w1dth: 599px: height: 699Dpx: 
touch-action: none: 


pachinko.html 


J 
く / style> 
< く SCr1Dt Src="T1ny2D . ]S "> く / SCF1Dt> 
く SCF1Dt> 
"USe StFr1Ct": 
var ctx, engine, offset = 9, catcher, score = 9, isMouseDown = false: 
var wallsS =[ 
[-199, -199, 199, 899], 
[-199, -199, 899, 199], 
[599, -199, 199, 899] , 
まあ: 
var 1ines =[ 
359、 っ 59、-59、-1591: 
1350 。 5 人 9 550。 156」。 
[459, 299, 459, 899]」 
す 


function 1nit() { 


// エン ジン 初期 化 & イベ ント ハン ドラ 設定 

eng1ne = new Engine(-199, -199, 799, 899, の, 9.8): 

var canvas = document . getElementById( "canvas”): 
CanVvaSs . OnmOuSedOwn = mymouSedown : 

CanVaS . OnmOUSGUD ニ ymOuSeUD : 

canvas . addEventListener('touchstart ', mymousedown) : 

canvaS . addEventListener( "touchend ' , mymouSeuD) : 

canvas .oncontextmenu = function (e) { e.preventDefault(): }: 


// 展 

walls.forEach(function (w) { 
r = new RectangleEntity(w[9], w[1], w[2], w[3]): 
r.Color = "gray": 
eng1ne.entities .Dush(r) : 


まま が 


lines.forEach(function (w) { 
r = new LineEntity(w[9], w[1], w[2], w[3], 9.8): 
Fr.Color = "gray": 
engine.entities.Dpush(r): 


すか 


// 釘 
for (var i = の @ : i < 9 : i++) 人 { 
for (var j= の 9 の:] く < く 8+1i%2 : せ +) 人 { 
Va X ご て] % ま 90 + 5 の 9) ~- 25 x て 1 % 2): 
varr = new CircleEntity(x, 1 x* 59 + 199, 5, BodyStatic, 1): 
F.Ccolor = "blue": 
eng1ne.entities.Dush(r): 


catcher = new RectangleEntity(9, 559, 159, 25): 
catcher.color = "go1d": 
catcher.sign = 1: 


eng1ne.entities.push(catcher) : 


// その 他 (Canvas, Timer) の 初期 化 
ctx = canvas .getContext( "2d"): 
ctx.font = "29pt Aria1"・ 

ctx .strokeStyle = "blue": 

timer = setInterval(tick, 59): 


補 テ ー や せい 浴 RVWNH 趣 きき 9 | テー 半 冬 O 汐 RNVNIYH 山 寺 4 1 の 》 


function tick() { 
1f (isMouseDown) { 
offset = Math.min(offset + 5, 269): 
J 
catcher.sign *= (catcher.x > 399 || catcher.x < 9@) ? -1 : 1: 
catcher.x = catcher.x + 5 x* catcher.sign: 


engine.step(9.91): // 物理 エン ジン の 時 刻 を 進め る 
repaint(): // 再 描画 


function mymousedown(e) { 
1SMouseDown = true: 


307 


function mymouSeuD(e) { 

1sMouseDown = falSse: 

varr=new CircleEntity(475, 499, 19, BodyDynamic) : 

F.Color = "yellow": 

Fr.velocity.y = -offset / 5: 

Fr.onhit = function (me, Deer) { 

1† (peer == catcher) { 
engine.entities = engine.entities.filter(function (e) { 


Feturn e != me: 
け ) : 
SCOTe++・ 
J 
J 
offset = 9: 


engine.entities.Dpush(r): 


function repa1nt() { 
// 育 景 クリ ア 
ctx .f111Style = "#996699": 
ctx .f111Rect( の 9, 9 の, 599, 699): 


// ボー ル ・ 壁 の 描画 
for (var 1 = の : 1 く < く engine.entities.length: 1++) { 
var e = engine.entities[i]: 
ctx .f111Style = e.color: 
Switch (e.shape) { 
caSse ShapeC1rcle: 
ctx .beginPath( ) : 
ctx .arc(e.X, e.y, e.radius, 9, Math.PI x* 2): 
ctx .closePath( ) : 
C も が 。 そ を すま も よく 
break: 
case ShapeRectangle : 
ctx .f111Rect(e.xX, e.y, e.W, e.h): 
break: 
Case ShapeLine : 
ctx .beginPath( ) : 
Ctx .moveTo(e.x9, e.y9): 
ctx.11ineTo(e.x1, e.y1): 
ctx . Stroke( ) : 
break: 
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ctx .f1illText("score:" + score, 299, 39) : 

ctx .f111Style = "yellow": 

ctx .beginPath( ) : 

ctx.arc(475, 399 + offset, 19, 9, Math.PI x* 2): 
ctx .closePath( ) : 

ウッ ma す od 交代 


ctx .f111Style = "gray": 
ctx .f111Rect(455, 499 + offset, 49, 299): 
J 
く / SCr1Dt> 
く /head> 
< く body onl1oad="init() "> 
く <canvasS 1d="canvas” width="599" height="699"></canvas> 
く /body> 
く /html> 


( 6-2-5 | ベジ タブ ル マ ー チ (VegetableMarch.html) ) 


> ちの の の の ひら の の の の る の の の ひる の の の の の の ひひ の の の の ら の の の の の る の の の ふ ふ ゆ の の の の ひらの の の の の の の の の の の の の の の の の ら の の の の の の の の の の の の の の の の の の あの の の の の の ひらの の の の の の の の の の らら の の 6 の の の の や の の の の おら のぶ お の の の の の の の の の の の の の の の の の ⑤ お の の の ⑤ の の る の お あの る る あの る お あや の の の ae 。 


この 本 の 最後 を 締め くく る ゲー ム で す 。 近く に ある 同じ 野菜 を つなげ て どん どん 消し て いく ゲー ム で す 。 物理 
エン ジン と 沙 ち モノ 系 ゲー ム の 組み 合わ せ と い っ た と ころ で し ょ うか 。 一 度 に 多く の 野菜 を 消す ほど 高 得点 と な り 
ます 。 


補 テ ー キ せり 浴 VNNYH 山 きき | 9 | テー 寺 議 0 海 NVNINH 山 寺 4 1 の 》 
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く !DOCTYPE html> 


く title>VegetableMarch</tit]e> 
く <META charset="UTF-8"> 
< く style> 


#CanVaS { 
w1dth: 899Dx: 
height: 699Dx: 
touch-action: none: 
J 
#START { 
poSition: absolute: 
left: 299Dx: 
toD: 2099DX : 
J 


く / style> 
< く Scr1Dt Src="T1ny2D . ]S "> く /SCr1Dt> 
く SCF1Dt> 


"USe Str1Ct"・ 


Var ctx, eng1ine, vVegeSs =[], images = []: 
var timer = NaN, startT1ime = NaN, elapsed = の 9, score = 9 の : 
var walls =[ 
[-69, -199, 199, 899], 
[599, -199, 199, 899] , 
[-69, 529, 799, 199], 
人 


function rand(v) { 
return Math.floor(Math.random() * V\): 


function init() { = 夫 ま 
// エン ジン 初期 化 & Canvas 初 期 化 
var canvas = document.getElementById("canvas”): 
Cctx = canvaSs .getContext(”2d”): 
ctx.font = "29pt Arial1"・ 
ctx.strokeStyle = "blue": 
ctx.11neWidth = 5: 
ctx.textAlign = “center": 


engine = new Eng1ne(-199, -199, 799, 799, 9, 9.8): 


VegetableMarch.html 


// 壁 
walls.forEach(function (w) { 
varr=new RectangleEntity(w[9], w[1], w[2], w[3]): 


Fr.color = "gray": 
eng1ne.entities.push(r) : 
}): 
// 野菜 


for 《var# ュ 9 :1 で 7 <: エナ +) { 
for (var 〕= の 9 :] く 19 : j++) { 
+ 75 + rand(5) : 
Var y=]x* 59+ 59 + rand(5): 
varr=new CircleEntity(x, y, 25, BodyDynamic, 1, 9.98): 
F.Color = rand(5): 


VaFr X = ュ 1 メ * 6 


eng1ne.entities.push(r): 


for (var 13= テ の: すぐ く 5: 14+) { 
1mageS .DuSh(document . getElementById("fruit" + 1)): 


FeDpa1nt( ) : 


function go() { を 3 
Var canvaSs = document.getElementById( "canvas")・: 
CanVaS . OnmOuSedown = mymouSedown : 


宮 テ ー さ せい 浴 VWNH 帆 き | 9 | テー 寺 計 り 潤 RNNIYH 則 寺 4 1 の 9) 


CanVaS . OnmOUSemOVe = mymOuSemOVe : 

CanVaS . OnmOUSeGUD ニニ 田 ymOUSeUD : 

canvas . addEventListener('touchstart', mymousedown) : 
canvas . addEventListener('touchmove ', mymousemoVve) : 
canvas . addEventListener('touchend ' , mymouseuDp) : 






document . body . addEventListener('touchmove', function (event) { 
event.preventDefault( ) : 
}, false) : 


document .getElementById("START") . style .display = "none": ゃ 
document. getElementById("bgm") .play() : 


StartTime = new Date(): 
timer = SsetInterval(tick, 59) : 


/ 


J1 1 


*x メイ ン ル ー プ 
*/ 
function tick() {  e 語 
engine.step(9.91): // 物理 エン ジン の 時 刻 を 進め る e 下 


elapsed = ((new Date( ) ) . getTime() - startTime) / 1999: 
1† (elapsed > 57) { 
clearInterval (timer) : 
timer = NaN: 
ナ 
repaint() : // 再 描画 


function mymousedown(evt) { | 
var x = !isNaN(evt.offsetX) ? evt.offsetX : evt.touches[L9」.c1ientX: 
var y = !isNaN(evt.offsetY) ? evt.offsetY : evt.touches[9] .cl1ientY: 
engine.entities.forEach(function (e) { 
1† (e.isH1t(x, y) && e.shape == ShapeCircle) { 
VegeSs . DuSh(e) : 
e.Selected = true: 


け ) : 


function mymousemove(evt) { * キ 3 
1† (veges.length == の 9) { 
FetUurh: 


var x = !isNaN(evt.offsetX) ?2 evt.offsetX : evt.touches[L9」.c11ientX: 
lisNaN(evt.offsetY) ?2 evt.offsetY : evt.touches[9] .clientY: 
var p= vegesLveges.length - 1]: 


Var y 


eng1ne.entities.forEach(function (e) { 
1† (e.isHit(x, y) && e.shape == ShapeCircle) { 
1† (veges.1ndexOf(e) < 9 && e.color == Dp.color) { 
var d2 = Math.pow(e.xX - D.x, 2) + Math.pow(e.y - D.y, 2): 
1f (d2 < 4999) { 
VegeS . DuSh( e) : 
e.Selected = trUe: 


ま び 3 
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function mymouseup(evt) { ( こ 9 | 
1† (veges.length > 1) { 
// 選択 状態 の 野菜 を 削除 
eng1ne.entities = engine.entities.filter(function (e) { 
Feturn e.selected != true : 


}) 


// 消去 分 を 追加 
for (vaF 1 = の : i く veges.length : 1++) { 
var x = 75 + rand(350) : 
varr= new CircleEntity(x, 9, 25, BodyDynamic, 1, 9.98): 
F.Color = rand(5): 
engine.entities.Dpush(r): 


け 

SCOre += veges.length * 199: 
ナ 
veges.forEach(function (e) { delete e.selected }) 
VegeSs = []: 


function repaint() { を 和 [ り 
// 背景 クリ ア 
ctx .drawImage(fruitbg, 9, 9): 


// 野菜 
for (var 1i= の 9 : 1 く engine.entities.1ength: 1++) { 
var e = engine.entities[i] : 
Var 1mg = images[e.color] : 
1† (e.shape == ShapeCircle) { 
ctx . drawImage(1mg, e.X - 28, e.y - 28, 62, 62): 
1† (e.selected) { 
ctx .strokeStyle = "yellow": 
ctx .beginPath( ) : 
ctx .arc(e.xX, e.y, e.radius, 9, Math.PI x 2): 
ctx . closePath( ) : 
ctx . Stroke( ) : 


// 線 

1† (veges.length > 9) { 
ctx.strokeStyle = "#B1EB22": 
ctx .beginPath( ) 


宮 ー さ せい 次 VNYH 山 き | 9 | テー 凌 計り 汐 人 NVYH 紫 きき 4 1 の 
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ctx .moveTo(veges[9] .x, veges[9] .y): 

for (var 1= 1 : i+ く veges.length : i++) { 
ctx .1ineTo(veges[i].x, veges[i] .y) : 

} 


ctx . Stroke( ) : 


リプ 生 ユ ンー 

Ctx . SaVe( ) : 

ctx .f111Style = "#F9D79F": 

ctx.font = "bol1d 24pt sans-ser1f"・ 

ctx .font 

ctx .translate(659, 442): 

Ctx . Fotate( -9. 95) : 

ctx .f1l1Text(isNaN(timer) ? "FINISH" : "Score", 9, 9 の): 
Ctx . FeStOre( ) : 


と Nrt が 

Ctx . SaVe( ) : 

ctx.font = "bol1d 32pt sans-serif"・ 

ctx .translate(659, 365): 

ctx . rotate(9.08): 

ctx .f111Style = "#F9D79F": 

ctx .f111Text(('9999999'′+ score) . slice(-7) , 9, 9): 
ctx .restore( ) : 


// 残り 時 間 
Ctx . SaVe( ) : 
ctx .f111Style = "rgba(215,。 139, 49, 9.5)「: 
ctx .beginPath( ) : 
ctx.moveTo(656, 153): 
ctx .arc(656, 153, 88, -Math.PI / 2, elapsed / 57 x Math.PIx 2 - Math.PI / 2): 
ctx .closePath( ) : 
C も XX- を も も し )】 
Cctx . Festore( ) : 
J 
く / SCr1Dt> 
く /head> 
く <body onload="1nit( ) "> 
く !-- Thanks to httbp : //takao-suenobu.com/  & httDp : //dova-s . ]D/ --> 
く aud1O Src="bgm.mDp3" 1d="bgm "> く /audio> 
く canvas 1d="canvas” w1dth="899” height="699"></canvas> 
く 1mg 1d="START” src="start.png” onclick="go() "> 
く 1mg 1d="fruitbg” src="fruitbg.png” style="display:none" /> 
く 1mg 1d="fTru1t の 9" src="fruit の 9.png"” style="display :none" /> 
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く 1mg 1d="†TFu1t1" src="fruit1 .png" style="display:none" /> 
く 1mg 1d="fruit2” src="fru1t2.png” style="display :none" /> 
く 1mg 1d="fru1t3" src="fru1t3.png" style="display:none" /> 
く 1img 1d="fTru1t4” src="fruit4.png" style="display:none" /> 
く /body> 
く /html> 


ぁ 広域 変数 





使用 し て いる 広域 変数 は 以下 の と お り で す 。 


使用 し て いる 広域 変数 

変数 説明 

グラ フィ ッ ク コ ン テ キ スト 
物理 エン ジン 

野 迷 を 格納 する 配列 
タイ マー 

ゲー ム 開 始 時 刻 
経過 時 間 

コア 

壁 オ ブ ジ ェクト 

野 玉 の 画像 を 格納 する 配列 






engIin@e 










VegeS 
timer 
Start「ime 
elaDSed 
SCO「@ 


WIlIS 


ー 十 
と 


記 テ ケー させ 0 浴 VNVH 骨 きき | 9 | テー 款 計り 浴 RVINH 咽 等 る 


IImageS 


主 な 関数 に つい て 以下 に 説明 し ます 。 


1 init() 





初期 化 関数 で す 。canvas の コン テキ スト 設定 、 物理 エン ジン オブ ジェ クト の 作成 、 壁 や 野菜 オブ ジェ クト 
の 作成 を 行い 、 描 画 を 明示 的 に 行う た め に repaint() を 呼び 出し ます 。 ゲー ム 開 始 の タイ マー を 開始 する の は 
START ボタ ン が 押下 され た タイ ミン グ で あり 、 文 書 を ロー ド し た 時 点 で は な いこ と に 注意 し て くだ さい 。 


|2| go() 





ゲー ム を 開始 時 に 呼ば れる 関数 で す 。 スタ ー ト ボタ ン の 画像 「<img id=START" src='start.png' 
onclick='go()>」 の onclick 属性 か ら 呼 び 出 きれ ます 。 

まず 、canvas の タッ チ や マウ ス の イベ ント ハン ドラ を 登録 し ます 。 回 の コー ド は 、 タ ッ チ 時 に コン テキ スト メ 
ニュ ー が 表示 る れる の を 防止 する た め の 処 理 で す 。 


MM 
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document .body .addEventListener('touchmove', function (event) て 
event.preventDefau1t( ) : 
}), false) : 


また 、 調 の 


document.getElementById( "START”) .style.display = "none": 


で スタ ー ト ボタ ン を 非 表 示 に し て いま す 。 を その 後 BGM の 再生 を 開始 し 、 setInterval で メイ ン ル ー プ を 開始 し て 
いま す 。 





回 の engimne.step(0.01) で 物理 エン ジン の 時 刻 を 進め ます 。 経過 秒 数 を 以下 で 求め 、 


elapsed = ((new Date()) . getTime() - startTime) / 1999: 


57 秒 (BCGM の 再生 時 間 ) を 過ぎ た ら タ イマ ー を 停止 きせ て いま す 。 


3 コ KWihMit0 に YYe【eo/a1( に 749 


マウ ス や タッ チ 押 下 時 、 を の 座標 に 野菜 オブ ジェ クト が あっ た な ら ば 、 その オブ ジェ クト を 配列 veges に 格納 
し 、 そ の オブ ジェ クト の selected プロ パテ ィ を true に 設定 し ます 。 





ls| mymousemove(eVt) 


マウ ス 移 動 時 の イベ ント ハン ドラ で す 。 veges 配列 が 空 の と き は 単に return し ます 。 

|var p = vegeslveges.length - 1] 」 で は 配列 に ある 最後 の 野菜 を 取得 し 、 変 数 p に 格納 し て いま す 。 こ 
れ は マウ ス が 動い た と き 、 最 後に 選ば れ た 野菜 と 今 の マウ ス 位置 に ある 野菜 を 比較 し 、 距 離 が 近く 同じ 野 葉 
の と き に 限り 、 を その 野菜 を 選択 する と いう 処理 を 行う 必要 が ある た めで す 。 を その 処理 を 行っ て いる の が 以下 の 部 
0 ド 全 すす 。 


1f (e.isHit(x, y) && e.shape == ShapeCircle) { 
1f (veges.indexOf(e) < 9 && e.color == p.color) { 
var d2 = Math.pow(e.x - p.x, 2) + Math.pow(e.y - p.y, 2): 
if (d2 < 4999) { 
VegeS . DuSh(e) : 
e.Selected = true: 


最 人 の 下 文 が 、 対象 と な る オブ ジェ クト に マウ ス の 座標 が 含ま れ て いる か 、 形 状 が 円 か 否 か を 判断 し て いま 
す 。 それ ら の 条件 を 満た し て いる 場合 は 、 次 の 下 文 で すでに 野菜 が 選択 きれ て いな いか (配列 veges に 合 ま 
れ て いな いか = |Veges.indexOf(e) < 0])、 か つ 、 最 後 の 野 菜 と 今 の 野菜 が 同じ 種類 か (「e.color == 
p.color」) を 判断 し て いま す 。 そ れ ら の 条件 を 満た す と 、 最後 の 下 文 に 進み ます 。 こ こ で 2 つっ の 野菜 の 距離 が 
一 定 値 以 下 で ある か 判断 し 、 そ の 条件 を 満た し た と き に 、 その 野菜 を 配列 veges に 格納 し 、 プロ パテ ィ selected 
を true に 設定 し ます 。 


3E 当 Nat に 1:】010(:3Y49 


マウ ス が 離さ れ た と き の コ ー ル バッ ク で す 。 選択 状態 の 野菜 が 2 つ 以 上 ある 場合 (veges.length > 1)、 る 
の 野菜 を Array.filter を 使っ て 物理 世界 か ら 取り 除き ます 。Array.iilter は 条件 に 合致 し た 要素 だ け を 含む 配 
列 を 返し ます 。 条件 は 関数 メソ ッ ド で 指定 し ます 。 大 丈夫 で す よ ね ? 消去 し た ら そ の 分 の 野菜 を 追加 し て いま 
す 。 こ れ $ 今 まで 何 度 も 見 て きた コー ド で す 。 

そし て 、 選択 され た 野菜 の 数 に 応じ て スコ ア を 加算 し ます 。 最 後に すべ て の 野菜 の selected プロ パテ ィ を 削 
除 し 、 配 列 veges を 空 で 初期 化し て いま す 。 


3Ig:ieEllnit@ 


と くに 上 し い 処 理 は あり ませ ん 。 こ れ ま で と 同様 に 、 背 景 を クリ ア し て 物理 世界 に 含ま れる ShapeCircle を 描 
画 し ます 。 選択 状態 に ある 場合 (e.selected が true の と き ) は 円 を 強調 描画 し て 選択 きれ て いる こと が 視覚 的 
に わか る よう に し て いま す 。 あ と は 、 選択 状態 に ある 円 の 中 心 を 線 で 結ん で 描画 し 、 ゲー ム 終 了 時 の メッ セー ジ 、 
スコ ア の 捕 画 、 残 り 9 時 間 の 扇形 の 描画 を 行い ます 。 

一 見 する と 複雑 を うに 見 える ゲー ム で す が 非 常に シン プル に 実装 で き て いる こと が わか る と 思い ます 。 コ ー ド の 
内 容 は ビリ ヤー ド (P.295) と あま り 変 わり ませ ん 。 し か し な が ら ア イデ ィ ア 次 第 で まっ た 〈 く 別 の ゲー ム に な っ て いる 
の で す 。 物理 エン ジン の 威力 を 感じ て いた だ ける 一 例 で は な いで し ょ うか ? 








MM 固 
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田 JavaScript ゲー ム の た め の 単 純 な 2D 物理 エン ジン を 作成 する 
http://WWW.ibm.com/developerworks/jp/web/Iibrary/wa-build2dphysicsengine/ 

筆者 に は 「 目 の 肥 えた 読者 に は 物理 エン ジン " と いう 変 な 思い 込み が あり 、 2D 物 理 エ ンジ ン ラ イブ ラリ を 検 
索 し て いた 時 に 見 つけ た サイ ト で す 。 執筆 に 着手 し た 当初 は 、 自分 で エン ジン を 作る な ど ま っ た く 想 像 6 し て い 
ませ ん で し た が 、 記 事 を 読む に つれ “この 程度 な ら 自 分 で 作れ る か も " と いう 思い に な り ま し た 。 こ の 記事 な くし 
て Tiny2DjJs は あり えま せん で し た 。 


田 物 理 エ ンジ ン 実 装 時 に 参考 に し た リン ク 
http://kanasana.Sblo.jp/article/28818677.html 
http://hakuhin.jp/as/collide.html 
http://wakariyaSui.Sakura.ne.jD/D2/52/5221unndouryouhozonn.html 
http://Www.geocities.jD/no_Smoking_pool/study.html 


http://marupeke296.com/COL_2D_No10_SegmentAndSegment.html 
ベク トル 洒 算 の 復習 で は 上 記 サ イト の 情報 を 参考 に させ て いた だ きま し た 。 


田 Kickass Java Programming: Cutting-Edge Java Techniques With an Attitude 
ISBN-13: 978-1883577995 


Java 言語 の 本 (英語 ) で す が 、2D 描画 や 3D モデ リン グ な どき さま ざま な 技法 が 説明 され て いる 良書 で す 。 
Saturn Voyager は この 本 の サン プル を ヒン ト に 実装 し まし た 。 


一 ゲ ー ム を 作り な が ら 楽 し く 学 べ る HTML5+CSS+JavaScript プ ログ ラミ ング 
(イン プレ ス R&D 刊 ペー パー バッ ク 版 電子 書籍 版 ) 


本 書 の 姉妹 書 と も 言え る 抽 著 で す 。 掲載 し て いる ゲー ム は すべ て 異な り ま す 。 ほ か の ゲー ム や コー ド も 見 て み 
だ た いと いう 方 は ご 覧 いた だ けれ ば 幸い で す 。 


圏 BGM 
httD://takKaO-SuenODu.COm/ 

http://doVa-SJD/ と いう サイ ト か ら ス エ ノ ブ さん の 素材 を BGM と し て 利用 きせ て いた だ きま し た 。 ゲ ー ム の 印 
象 を ガラ ッ と か える こと が で きま し た 。 


田 そ の 他 (Reversi の アル ゴリ ズム ) 
httD://uguISu.SKr.jD/othello/5-1.html 
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オバ マ 大 統領 は アメ リカ の 若者 に こう 訴え か け ま し た 。 


ゲー ム は 買う だ け で な く 作 っ て みよ う | 
Dont just buy a new video game, make one. 
スマ ホ で 遊ぶ だ け で な く 〈 ブ ログ ラミ ング し よう | 


Dont just play on your phone, program it. 
また 、Facebook の 元 役 員 の Chamath Palihapitiya は こう 言っ た そう で す 。 
プロ グラ ミン グ を 学ぶ の な ら 、 生 涯 仕事 に 困ら 5 な いこ と を 私 が 保証 し よう 


アメ リカ や イギリス は 国 を 挙げ て プロ グラ ミン グ 教 育 に 力 を 入れ て いま す 。" 国 が 発展 し て いく た め に は プロ 
グラ ミン グ ス キ ル を 持つ 人 材 が 必要 だ と いう こと を トッ プ が 認識 し て いる か ら に ほか な り ま せん 。 今後 、 ブ ログ 
ラマ ー 不 足 は ます ます 深刻 に な る と 言わ れ て いま す 。 一 流 企 業 で も 激しい リス トラ が 行わ れる 今日 、 プ ログ ラミ ン 
グ ス キ ル を 身 に 着け て お く こと は 決し て 無駄 に は な ら な い は ず で す 。 幸い に も 自分 は 世界 中 の Developer と 一 
緒 に 製品 を 開発 する と いう 貴重 な 機会 に 恵まれ まし た が 、 こ れる も 自作 の アプ リ が 認め られ た こと が きっ か け で し 
た 。 目 分 に プロ グラ ミン グ ス キ ル が 無かっ た ら 、 そ ん な 経験 は で き な か っ た こと で し ょ う 。 

本 書 の と りあ ぇ ず の 目的 は “自分 で も ゲー ム を 作っ て みた い " と 興味 を 持っ て も ら う こと で す 。「 行 数 が 少な 〈 て 
わか りや すい 」 と いう 制約 の 下 、| 市 販 ゲ ー ム で 目 の 肥 えた 読者 の 興味 を も る 大 きつ ける 」 と いう 、 一 見 する と 矛 
盾 する 要件 を 満た す の は 、 か な り ハ ー ド ル の 高い チャ レン ジ で し た 。 自分 の 目標 が どこ まで 達成 で きた か 不安 
な 部 分 も あり ます 。 


"自分 で も ゲー ム を 作っ て みよ う " と 興味 を もつ 
ーー 。 ゲーム 作 9 り を 通し て プロ グラ ミン グ ス キ ル を 高め る こと が で きる 
ーー プロ グラ ミン グ ス キ ル を 持つ こと で 将来 の 可能 性 が 広がる 


そん な 若い 読者 が 未来 を 切り 拓く た め に 、 本 書 が 一 助 に な れ ば 、 こ の うえ ない 喜び で す 。 

最 修 に この 場 を 借り て 感謝 の 意 を 表 き る せ て 〈 だ さい 。 和 斜め 向かい に お 住い の 井筒 家 と は 長年 家族 ぐる み の 
付き 合い を る きせ て いた だ いて いま す が 、 井筒 晴香 きん に は Funky Blocks と Vegetable March の デザ イン を 担 
当 し て いた だ きま し た 。 こ れ ら 2 つの ゲー ム は ほか の サン プル と 比べ て 格段 に 良い 仕上 が り と な り ま し た が 、 これ 
は 晴香 さん の 尽力 に よる も の で す 。 卒業 制作 前 の 忙し い 時 期 に も 関わ ら ず 快 ⑧| き 受け て いた だ き 、 本当 に 感 
謝 し て お り ま す 。 

本 書 の 刊行 に あたり 、 ピー チ プ レス 社 の 川 放さ ん に は 自分 の 押 い WORD 原稿 を 校正 いた だ く と と も に 、 
書籍 と し て 素晴らし い 体 才 に 仕上 げ て いた だ きま し た 。 ま た | 次 の 世代 に プロ グラ ミン グ の 面白 き を 伝え た い 」 
日頃 か ら 感 じ て い た 筆者 に 、 この よう な 執筆 の 機会 を 提供 し て いた だ いた イン プレ ス の 方 々 に も 深く 感謝 し て 
お り ま す 。 
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